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.5k 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
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Sahil Sasapara

2 years ago

5.7k
About us section

Mr Robot

3 years ago

20.5k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Augustin

1 year ago

1.3k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

3 months ago

399
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
super cube
complex landing page for super cube created by salvator

Baraka Salvator

1 year ago

1.5k
Hero section
Beatiful landing page hero section

Rajesh Maheshwari

1 year ago

2.9k
L'art de coder
L'art de coderL'art de coder

Omer fils ELENGA

7 months ago

484