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

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

33.3k
Hero component

Author:
Freja Jensen

3 years ago

13.1k
Hero section with search

Author:
TailwindFlex

3 years ago

12k
landi page template

Author:
Raul antonio de la cruz hernandez

2 months ago

219
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.

Author:
Juraj

1 month ago

70
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

1 year ago

2.2k
Hero section with image

Author:
Sophia Baker

3 years ago

13.3k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

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

Author:
Anonymous

2 years ago

20.4k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Author:
Gianluca Secondo

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components