Home
Crimson
animated hero

animated hero

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

Hero

Author Crimson

168

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

Hero section with Big Heading
Hero banner with a gradient background, ideal for showcasing products or services. I also support dark mode.

Author:
Mereani Waqa

1 year ago

7.1k
Hero section with search

Author:
TailwindFlex

2 years ago

10k
Single Page Portfolio

Author:
Samuel Abera

3 weeks ago

322
Beautiful Hero Section

Author:
Brandon D

2 years ago

12.8k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

5 months ago

825
Hero banner

Author:
Laurits

1 year ago

10.8k
Hero with SVG background
It has a nice 'Sign Up with Google' CTA button

Author:
Santiago Hernandez

8 months ago

1.2k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

2 weeks ago

61
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

10 months ago

3.1k
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

1 year ago

8.8k
hero section fullpage

Author:
Leon Bachmann

1 year ago

10.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:
Vernon Francis

4 months ago

859

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components