Home
Laurits
Hero with button

Hero with button

This tailwind example is contributed by Laurits, on 01-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is banner

Hero Jumbotron

Author Laurits

10.6k

Fork Fullscreen

<section class="py-8 sm:py-16 md:py-24 flex items-center justify-center">
    <div class="mx-auto max-w-[43rem]">
        <div class="text-center">
            <p class="text-lg font-medium leading-8 text-gray-500">Get your tasks done</p>
            <h1
                class="my-3 sm:my-4 md:my-8 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-10 tracking-tight text-black">
                Productivity tool for
                <span class="text-blue-700">Devs</span>
            </h1>
            <p class="text-lg leading-relaxed text-slate-500">We help you streamline your workflow by planning,
                time-boxing and executing one task at a time.
            </p>
        </div>
        <div class="mt-6 flex items-center justify-center gap-4">
            <button
                class="inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xl leading-tight hover:bg-blue-600 cursor-pointer hover:shadow-sm focus:bg-blue-600 focus:shadow-sm focus:outline-none focus:ring-0 active:bg-blue-700 active:shadow-sm disabled:opacity-25 transition duration-150 disabled:pointer-events-none ease-in-out">
                Get started!
            </button>
        </div>
    </div>
</section>

Related Examples

Very simple hero

Author:
Laurits

2 years ago

8.6k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.6k
Hero with video background

Author:
farisubuntu

10 months ago

1.7k
Hero Section with Dark Mode
Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

Author:
Rathanak Phan

2 months ago

187
Creative Hero Section

Author:
Ijila Itunu

3 months ago

723
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

5 months ago

927
Basic Jumbotron

Author:
Leon Bachmann

2 years ago

9.9k
work hard
by salvator

Author:
Baraka Salvator

2 months ago

109
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

2 years ago

13.1k
Hero section with image

Author:
Sophia Baker

2 years ago

12.4k
Hero

Author:
ORGIN_DREAMS

3 months ago

406
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

2 months ago

539

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components