Hero with button

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

Hero Jumbotron

Author Laurits

Tailwind v3.4 11.4k 12

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

Laurits

3 years ago

9.7k
Call to action section with image

Steven Kuhn

3 years ago

10.9k
3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10k
Hero banner

Piet Vriend

3 years ago

17.9k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.1k
Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Homayoun

1 year ago

678
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
Hero section

iamlos

1 year ago

2.2k
About Us

KULDEEP

1 year ago

1.7k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Emdadul Islam

2 years ago

5.9k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

7 months ago

502
Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Mereani Waqa

2 years ago

9.4k