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

9.6k

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

3 years ago

11.9k
Hero section for website

Author:
Leon Bachmann

3 years ago

11.9k
Nature Hero

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

1 year ago

1.9k
Hero Section

Author:
Amine Ghanim

10 months ago

2.1k
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

4 weeks ago

152
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

8 months ago

1.1k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

8 months ago

1.2k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

8 months ago

1.1k
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

8 months ago

789
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

1 year ago

1.3k
App Hero Section With header

Author:
Abdul Baset Bappy

7 months ago

1.1k
Portfolio Hero Section 4

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

1 year ago

4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components