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
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Gianluca Secondo

1 year ago

2.2k
Single Page Portfolio

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.2k
Visernic Profile

MD Mostafa Niloy

1 year ago

1.3k
GreenLeaf
Transform Your Garden

ORGIN_DREAMS

1 year ago

1.8k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

10 months ago

1.1k
test
test

Anonymous

1 year ago

1.1k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

4 months ago

411
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Akram Khan

2 years ago

3.1k
Background image section

Marc

2 years ago

7.5k
Inventory
management

Ramkesh Gupta

1 year ago

898