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.6k

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

Portfolio Hero Section 5

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

6 months ago

1.5k
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

4 months ago

783
Minimalistic Hero Section with Radial Gradient for E-Commerce
This hero section features a modern radial gradient background where the center remains white and fades into a soft blue at the edges. Designed for an e-commerce website, it provides a clean, elegant, and visually appealing layout with a bold headline, a call-to-action button, and a seamless user experience. The responsive design ensures a great appearance on all screen sizes.

Author:
SHARIFUL ISLAM

7 months ago

1.2k
tradition music
by salvator

Author:
Baraka Salvator

4 months ago

573
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

7.9k
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

Author:
nii fanny

4 months ago

300
Startup page

Author:
ORGIN_DREAMS

4 months ago

321
Hero section with large image
Hero section with large image

Author:
Emdadul Islam

1 year ago

3.9k
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
Minimalistic hero section

Author:
Sophia Baker

2 years ago

11.3k
Portfolio Hero Section

Author:
KULDEEP

3 months ago

446
Home
html , css

Author:
Hacker Development

5 months ago

393

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components