Hero with description

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

Hero

Author Laurits

Tailwind v3.4 9.8k 17

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

TailwindFlex

4 years ago

12.8k
Hero section for website

Leon Bachmann

3 years ago

12.4k
Hero template

Leon Bachmann

3 years ago

14.6k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

565
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

14.9k
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
Login_Form
help to logging in

ineza aime stella

1 year ago

1.1k
Hero Section Fashion Page

ABDO-SY

1 year ago

1.7k
new potifolio
How to Build a Powerful Web Developer Portfolio (With Examples!)

Augustin

1 year ago

1.3k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

422
flower
by salvator

Baraka Salvator

1 year ago

1.8k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

10 months ago

758