Home
Freja Jensen
Hero component

Hero component

This tailwind example is contributed by Freja Jensen, on 09-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Freja Jensen

11.9k

Fork Fullscreen

<div class="bg-gradient-to-r from-blue-500 to-green-500 flex flex-col h-screen">
    <nav class="bg-white py-6 px-8 flex justify-between items-center">
        <a href="#" class="text-xl font-bold text-gray-800">Brand Name</a>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800">Home</a></li>
            <li><a href="#" class="text-gray-800">About</a></li>
            <li><a href="#" class="text-gray-800">Services</a></li>
            <li><a href="#" class="text-gray-800">Contact</a></li>
        </ul>
    </nav>
    <header class="flex-grow flex flex-col justify-center items-center px-8">
        <h1 class="text-5xl font-bold text-white text-center mb-8">Welcome to Brand Name</h1>
        <p class="text-white text-lg text-center mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
            sagittis lobortis sapien, eu tincidunt metus semper eget. Sed at malesuada arcu. Pellentesque habitant morbi
            tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <a href="#"
            class="text-lg bg-yellow-500 hover:bg-yellow-600 text-white py-4 px-6 rounded-lg font-bold shadow-md =">Get
            started
        </a>
    </header>
</div>

Related Examples

Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

16.8k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

17.7k
Hero section with background gradient

Author:
Freja Jensen

2 years ago

8.6k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

27.3k
Background image section

Author:
Charlotte Dupont

2 years ago

17.1k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.7k
Hero with video background

Author:
Samuel Dawson

2 years ago

14.5k
Hero section responsive

Author:
Samuel Dawson

2 years ago

13.8k
No distraction search field

Author:
_Amar_

1 year ago

11k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

9.6k
Hero section with image

Author:
Sophia Baker

2 years ago

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

1 month ago

329

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components