Home
Gbenga Adegoke
Extra large hero

Extra large hero

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

Hero

Author Gbenga Adegoke

10.6k

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

Author:
_Amar_

2 years ago

12.2k
Hero section responsive

Author:
Samuel Dawson

3 years ago

15.4k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

33k
Hero component

Author:
Freja Jensen

3 years ago

13.1k
Hero section with search

Author:
TailwindFlex

3 years ago

11.9k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

9 months ago

1.2k
hero section

Author:
SAURAV SINGH

10 months ago

1k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

4 days ago

57
Hero

Author:
Hasan AlDoy (McDoy)

1 year ago

1.5k
strawbery
by salvator

Author:
Baraka Salvator

9 months ago

906
Hero banner

Author:
Piet Vriend

3 years ago

16.8k
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Author:
Omer fils ELENGA

1 month ago

119

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components