Standard Hero

This tailwind example is contributed by Anonymous, on 09-Mar-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Hero

Author Anonymous

Tailwind v3.4 4.7k 14

Fork Fullscreen

<div class="bg-gray-900 py-20">
    <div class="container mx-auto px-6 md:px-12">
        <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 lg:w-2/3">
                <h1 class="text-4xl md:text-6xl lg:text-7xl text-white font-bold mb-6">
                    Welcome to our <br class="hidden md:block" />
                    <span class="text-indigo-500">Awesome</span> Website
                </h1>
                <p class="text-lg md:text-xl lg:text-2xl text-gray-400 mb-8">
                    We create beautiful and functional websites for businesses of all sizes.
                </p>
                <div class="flex gap-2">
                    <a href="#" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6 rounded-md">Get
                        Started
                    </a>
                    <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-md">Learn
                        More
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 lg:w-1/3 mt-8 md:mt-0">
                <img src="https://via.placeholder.com/500x500" alt="Hero Image" class="rounded-lg shadow-lg" />
            </div>
        </div>
    </div>
</div>

Related Examples

Banner Slider

JUGENDRA GANGWAR

1 month ago

283
Cyamunara
used to sell everything someone need to sell

INGRIDE MUZIRANENGE

1 year ago

1.8k
Portfolio Hero Section

KULDEEP

1 year ago

1.1k
Hero

Aman kumar

2 years ago

7.7k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

627
Hero Components

Sherry Lynne

1 month ago

97
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
Registration
used in personal information

Uwase Alliance

1 year ago

1.5k
Hero Beer

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.5k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

KULDEEP

1 year ago

2.5k
login form
this login form it will be used for sign in to every website

nii fanny

1 year ago

902
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

ishimwe prince

1 year ago

1.4k