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.4k

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.1k
Hero section responsive

Author:
Samuel Dawson

3 years ago

15.2k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

32.2k
Hero component

Author:
Freja Jensen

2 years ago

12.9k
Hero section with search

Author:
TailwindFlex

3 years ago

11.7k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

222
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.3k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

5 months ago

903
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

6 months ago

648
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

1 year ago

1.8k
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

9 months ago

1.6k
Hero with video background

Author:
Samuel Dawson

3 years ago

16.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components