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

2.4k

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

App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

591
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

1.8k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

3 months ago

611
Home
html , css

Author:
Hacker Development

4 months ago

328
Food App Web design

Author:
Aitrik Saha

6 months ago

1.3k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Yoga Coach Hero Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

5.2k
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

3 months ago

535
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

3 months ago

736
hero section fullpage

Author:
Leon Bachmann

2 years ago

11.1k
App Hero Section

Author:
Abdul Baset Bappy

2 months ago

333
Clean hero section

Author:
OmKar Mehta

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components