Home
zobaidul kaziex
Hero Section>> visually striking and incorporates some different elements.

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?

This tailwind example is contributed by zobaidul kaziex, on 11-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author zobaidul kaziex

5.3k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyCompany - Alternative Hero Section</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-sans">

<main class="pt-16">
        
        <section class="relative bg-gradient-to-br from-blue-900 to-indigo-800 text-white overflow-hidden">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');"></div>
            
            <div class="container mx-auto px-4 py-24 md:py-32 relative z-10">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    
                    <div class="w-full md:w-1/2 mb-12 md:mb-0">
                        <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                            Innovate.<br>Transform.<br>Succeed.
                        </h1>
                        <p class="text-xl mb-8 text-gray-300">Empowering businesses with cutting-edge solutions for a digital future.</p>
                        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                            <a href="#" class="bg-white text-blue-900 font-semibold px-8 py-3 rounded-full hover:bg-blue-100 transition duration-300 text-center">Get Started</a>
                            <a href="#" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-full hover:bg-white hover:text-blue-900 transition duration-300 text-center">Learn More</a>
                        </div>
                    </div>
                    
                    
                    <div class="w-full md:w-1/2 md:pl-12">
                        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 shadow-2xl">
                            <h2 class="text-2xl font-semibold mb-6">Why MyCompany?</h2>
                            <ul class="space-y-4">
                                <li class="flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                                    <span>Lightning-fast Performance</span>
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                                    <span>Bank-grade Security</span>
                                </li>
                                <li class="flex items-center">
                                    <svg class="w-6 h-6 mr-3 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                                    <span>AI-powered Insights</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="absolute bottom-0 left-0 right-0">
                <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
                </svg>
            </div>
        </section>

</main>

</body>
</html>

Related Examples

joker
joker cyber punk

Author:
Baraka Salvator

7 months ago

1.2k
Creative Hero Section

Author:
Ijila Itunu

8 months ago

1.3k
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

7 months ago

831
Hero with button

Author:
Laurits

2 years ago

11k
home
html , css

Author:
Hacker Development

8 months ago

1.8k
tradition music
by salvator

Author:
Baraka Salvator

7 months ago

825
hero section fullpage

Author:
Leon Bachmann

2 years ago

11.6k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

3 weeks ago

195
Game changer
by salvator

Author:
Baraka Salvator

7 months ago

746
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

98
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

9 months ago

1.8k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components