Extra large hero

This tailwind example is contributed by Gbenga Adegoke, on 14-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Gbenga Adegoke

Tailwind v3.4 11k 8

Fork Fullscreen

<div class="bg-gray-100 font-sans">
    <div class="container mx-auto px-4 py-8">
        <nav class="flex justify-between items-center">
            <a href="#" class="font-bold text-xl text-indigo-600">My Site</a>
            <div>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Home</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">About</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Contact</a>
                <a href="#" class="text-gray-600 hover:text-gray-900 mx-4">Blog</a>
            </div>
        </nav>
        <div class="flex flex-col justify-center items-center my-16">
            <h1 class="text-5xl font-bold text-gray-800 leading-tight">Welcome to My Site</h1>
            <p class="text-2xl text-gray-600 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white text-xl mt-8 py-4 px-8 rounded-lg">Get Started</button>
        </div>
    </div>
</div>

Related Examples

No distraction search field

_Amar_

3 years ago

12.5k
Hero section responsive

Samuel Dawson

3 years ago

15.8k
Product Page
Showcase for the product.

Prem..

4 years ago

34.8k
Hero component

Freja Jensen

3 years ago

13.5k
Hero section with search

TailwindFlex

4 years ago

12.8k
Hero section with large image
Hero section with large image

Emdadul Islam

2 years ago

5.3k
GreenLeaf
Transform Your Garden

ORGIN_DREAMS

1 year ago

1.8k
Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

9 months ago

524
Hero section for website

Leon Bachmann

3 years ago

12.4k
Hero with button

Laurits

3 years ago

11.5k
Hero section with bold heading

Abigail

3 years ago

12.2k
Hero Section

Gbenga Adegoke

3 years ago

10.4k