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

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.5k
Hero section for website

Author:
Leon Bachmann

2 years ago

11.3k
portifolio
skills

Author:
ishimwe prince

3 months ago

296
Landing page

Author:
Maxim

5 months ago

1.4k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

1 year ago

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

7 months ago

1.3k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

6 months ago

1.8k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

10k
Hero Beer

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

1 year ago

4.3k
hero section

Author:
Anonymous

1 year ago

9.5k
Login_Form
help to logging in

Author:
ineza aime stella

3 months ago

465
Hero Section

Author:
Amine Ghanim

5 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components