animated hero

This tailwind example is contributed by Crimson, on 14-Jan-2025. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Crimson

Tailwind v3.4 4.5k 7

Fork Fullscreen

<div class="relative w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-20">
            
            <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 items-center">
                
                <div class="space-y-6 sm:space-y-8 text-center lg:text-left">
                    
                    <div class="animate-reveal [animation-delay:0.2s] flex justify-center lg:justify-start">
                        <div class="inline-flex items-center px-3 py-1.5 border border-white/10 rounded-full bg-white/5 backdrop-blur-lg transform hover:scale-105 transition-transform">
                            <div class="w-2 h-2 rounded-full bg-violet-500 animate-pulse"></div>
                            <span class="ml-2 text-xs sm:text-sm text-white/70 tracking-wider">NEXT GENERATION</span>
                        </div>
                    </div>

<div class="animate-reveal [animation-delay:0.4s]">
                        <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold">
                            <span class="inline-block bg-gradient-to-r from-violet-300 via-cyan-300 to-violet-300 bg-[length:200%_auto] animate-gradient bg-clip-text text-transparent">Future of</span>
                            <span class="block mt-2 text-white">Digital Design</span>
                        </h1>
                    </div>

<p class="text-base sm:text-lg text-white/60 max-w-xl mx-auto lg:mx-0 animate-reveal [animation-delay:0.6s]">
                        Experience the next evolution of digital interfaces. Where minimalism meets innovation, creating seamless and intuitive experiences.
                    </p>

<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 animate-reveal [animation-delay:0.8s]">
                        
                        <button class="group relative w-full sm:w-auto px-6 py-3 min-w-[160px]">
                            <div class="absolute inset-0 bg-gradient-to-r from-violet-600 to-cyan-600 rounded-lg"></div>
                            <div class="absolute inset-0 bg-gradient-to-r from-violet-600 to-cyan-600 rounded-lg blur-lg group-hover:opacity-60 transition-opacity duration-500"></div>
                            <div class="relative flex items-center justify-center gap-2">
                                <span class="text-white font-medium">Explore Interface</span>
                                <svg class="w-5 h-5 text-white transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                                </svg>
                            </div>
                        </button>

<button class="w-full sm:w-auto px-6 py-3 rounded-lg border border-white/10 bg-white/5 backdrop-blur-lg text-white/70 hover:bg-white/10 hover:text-white transition-all min-w-[160px]">
                            Documentation
                        </button>
                    </div>
                </div>

<div class="relative h-[400px] sm:h-[500px] lg:h-[600px] mt-8 lg:mt-0 animate-reveal [animation-delay:1s]">
                    
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="relative w-[280px] sm:w-[350px] lg:w-[400px] h-[280px] sm:h-[350px] lg:h-[400px] animate-morph">
                            
                            <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-lg rounded-[inherit] border border-white/10 shadow-2xl"></div>
                            
                            
                            <div class="absolute inset-4 sm:inset-6 flex flex-col justify-between p-4 sm:p-6">
                                
                                <div class="space-y-3 sm:space-y-4">
                                    <div class="w-8 sm:w-12 h-8 sm:h-12 rounded-full bg-gradient-to-r from-violet-500 to-cyan-500 animate-pulse"></div>
                                    <div class="h-1.5 sm:h-2 w-20 sm:w-24 bg-white/20 rounded-full"></div>
                                    <div class="h-1.5 sm:h-2 w-24 sm:w-32 bg-white/10 rounded-full"></div>
                                </div>
                                
                                
                                <div class="flex justify-between items-center">
                                    <div class="space-y-2">
                                        <div class="h-6 sm:h-8 w-20 sm:w-24 rounded-lg bg-gradient-to-r from-violet-500/20 to-cyan-500/20"></div>
                                        <div class="h-1.5 sm:h-2 w-12 sm:w-16 bg-white/20 rounded-full"></div>
                                    </div>
                                    <div class="w-12 sm:w-16 h-12 sm:h-16 rounded-full bg-gradient-to-r from-violet-500/30 to-cyan-500/30 animate-float"></div>
                                </div>
                                
                                
                                <div class="space-y-2 sm:space-y-3">
                                    <div class="h-1.5 sm:h-2 w-full bg-white/10 rounded-full"></div>
                                    <div class="h-1.5 sm:h-2 w-3/4 bg-white/20 rounded-full"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Bonimater

1 year ago

1.3k
Game changer
by salvator

Baraka Salvator

1 year ago

1.5k
Drinkware 2

Maxim

1 year ago

1.6k
Hero section with large image
Hero section with large image

Emdadul Islam

2 years ago

5.2k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
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
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Sudip chaudhary

1 year ago

1.1k
Slide
A slide component which could be used as hero section or in a slideshow

farid

1 year ago

2.6k
Hero banner

Laurits

3 years ago

13k
strawbery
by salvator

Baraka Salvator

1 year ago

1.9k
Hero with Background Image

ariaw

11 months ago

1k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

6 months ago

422