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

12.6k

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

18.5k
A Fullscreen Hero Section

Author:
Brandon D

2 years ago

19.7k
Hero section with background gradient

Author:
Freja Jensen

2 years ago

8.8k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

30.1k
Background image section

Author:
Charlotte Dupont

2 years ago

18.2k
Responsive hero section

Author:
Amit Pachange

2 years ago

14.4k
Hero with video background

Author:
Samuel Dawson

2 years ago

15.7k
Hero section responsive

Author:
Samuel Dawson

2 years ago

14.5k
No distraction search field

Author:
_Amar_

2 years ago

11.6k
Extra large hero

Author:
Gbenga Adegoke

2 years ago

10.2k
Hero section with image

Author:
Sophia Baker

2 years ago

12.2k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

1 year ago

4.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components