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

11k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

2 months ago

654
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

11 months ago

4.1k
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

11 months ago

1.7k
Basic hero section

Author:
Lîmåã M

1 year ago

15.4k
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

8 months ago

1.1k
Hero banner

Author:
Laurits

2 years ago

11.7k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

2 months ago

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

Author:
Mereani Waqa

1 year ago

7.8k
Very simple hero

Author:
Laurits

2 years ago

8.1k
Hero Section Fashion Page

Author:
ABDO-SY

1 month ago

261

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components