Home
Laurits
Hero with description

Hero with description

This tailwind example is contributed by Laurits, on 31-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Laurits

8.9k

Fork Fullscreen

<div class="relative px-6 lg:px-8 dark:bg-gray-800">
    <div class="mx-auto max-w-3xl pt-20 pb-32 sm:pt-48 sm:pb-40">
        <div>
            <div>
                <h1 class="text-4xl font-bold tracking-tight sm:text-center sm:text-6xl dark:text-gray-100">
                    Title of your website
                </h1>
                <p class="mt-6 text-lg leading-8 text-gray-600 sm:text-center dark:text-gray-200">
                    Long description of your website,
                    Long description of your website,
                    Long description of your website,
                    Long description of your website,
                    Long description of your website,
                </p>
                <div class="mt-8 flex gap-x-4 sm:justify-center">
                    <a href="#"
                        class="inline-block rounded-lg bg-indigo-600 px-4 py-1.5 text-base font-semibold leading-7 text-white shadow-sm ring-1 ring-indigo-600 hover:bg-indigo-700 hover:ring-indigo-700">
                        Get started
                        <span aria-hidden="true" class="text-indigo-200">→</span>
                    </a>
                    <a href="#"
                        class="inline-block rounded-lg px-4 py-1.5 text-base font-semibold leading-7 text-gray-900 dark:text-gray-100 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                        Read the guide
                        <span aria-hidden="true" class="text-gray-400">→</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Hero section with search

Author:
TailwindFlex

2 years ago

10.9k
Hero section for website

Author:
Leon Bachmann

2 years ago

11.1k
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

9 months ago

2.1k
Portfolio Hero Section 5

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

2 months ago

627
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

2 weeks ago

41
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

6 days ago

38
flower
by salvator

Author:
Baraka Salvator

1 week ago

26
Modern page
hero page by salvator

Author:
Baraka Salvator

1 week ago

120
Beautiful Hero Section

Author:
Brandon D

2 years ago

14.1k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14.3k
Cyamunara
used to sell everything someone need to sell

Author:
INGRIDE MUZIRANENGE

1 week ago

22
Hero section responsive

Author:
Samuel Dawson

2 years ago

14.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components