Home
Baraka Salvator
Magic Sound

Magic Sound

by salvator

This tailwind example is contributed by Baraka Salvator, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Baraka Salvator

747

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nebula Audio | Immersive Sound Experience</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'void': '#0a0a0a',
                        'plasma': '#6d28d9',
                        'plasma-light': '#8b5cf6',
                        'plasma-dark': '#4c1d95',
                        'neon': '#22d3ee',
                        'carbon': '#1e1e1e',
                        'steel': '#e5e7eb',
                    },
                    fontFamily: {
                        sans: ['"Inter"', 'sans-serif'],
                        mono: ['"Roboto Mono"', 'monospace'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float-xy': 'floatXY 6s ease-in-out infinite',
                        'glow': 'glow 3s ease-in-out infinite alternate',
                        'wave': 'wave 8s linear infinite',
                        'underline-expand': 'underlineExpand 0.5s ease-out forwards',
                        'navbar-slide': 'navbarSlide 0.8s ease-out',
                    },
                    keyframes: {
                        floatXY: {
                            '0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
                            '25%': { transform: 'translate(5px, -5px) rotate(1deg)' },
                            '50%': { transform: 'translate(0, -8px) rotate(0deg)' },
                            '75%': { transform: 'translate(-5px, -5px) rotate(-1deg)' },
                        },
                        glow: {
                            '0%': { 'box-shadow': '0 0 0 0 rgba(34, 211, 238, 0)' },
                            '100%': { 'box-shadow': '0 0 20px 5px rgba(34, 211, 238, 0.3)' },
                        },
                        wave: {
                            '0%': { transform: 'rotate(0deg)' },
                            '10%': { transform: 'rotate(-5deg)' },
                            '20%': { transform: 'rotate(5deg)' },
                            '30%': { transform: 'rotate(-5deg)' },
                            '40%': { transform: 'rotate(5deg)' },
                            '50%': { transform: 'rotate(0deg)' },
                            '100%': { transform: 'rotate(0deg)' },
                        },
                        underlineExpand: {
                            '0%': { transform: 'scaleX(0)', 'transform-origin': 'left' },
                            '100%': { transform: 'scaleX(1)', 'transform-origin': 'left' },
                        },
                        navbarSlide: {
                            '0%': { transform: 'translateY(-100%)' },
                            '100%': { transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
</head>
<body class="bg-void text-steel font-sans overflow-x-hidden">
    
    <nav class="fixed w-full z-50 bg-carbon bg-opacity-90 backdrop-blur-md border-b border-steel border-opacity-10 animate-navbar-slide">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-plasma to-neon flex items-center justify-center animate-pulse-slow">
                        <svg class="w-5 h-5 text-void" 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 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
                        </svg>
                    </div>
                    <span class="text-xl font-medium bg-gradient-to-r from-steel to-neon bg-clip-text text-transparent">NEBULA</span>
                </div>

<div class="hidden md:flex items-center space-x-8">
                    <a href="#" class="relative group text-steel hover:text-neon transition-colors duration-300">
                        Products
                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-neon group-hover:w-full transition-all duration-300"></span>
                    </a>
                    <a href="#" class="relative group text-steel hover:text-neon transition-colors duration-300">
                        Technology
                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-neon group-hover:w-full transition-all duration-300"></span>
                    </a>
                    <a href="#" class="relative group text-steel hover:text-neon transition-colors duration-300">
                        Support
                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-neon group-hover:w-full transition-all duration-300"></span>
                    </a>
                    <a href="#" class="relative group text-steel hover:text-neon transition-colors duration-300">
                        Company
                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-neon group-hover:w-full transition-all duration-300"></span>
                    </a>
                </div>

<div class="md:hidden">
                    <button class="text-steel hover:text-neon focus:outline-none">
                        <svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>

<section class="relative min-h-screen overflow-hidden pt-24">
        
        <div class="absolute inset-0 z-0 overflow-hidden">
            
            <div class="absolute inset-0 opacity-10" style="
                background-image: 
                    radial-gradient(circle at 30% 50%, rgba(109, 40, 217, 0.4) 0%, transparent 20%),
                    radial-gradient(circle at 70% 30%, rgba(34, 211, 238, 0.4) 0%, transparent 25%);
                background-size: 200% 200%;
                animation: wave 20s linear infinite alternate;
            "></div>
            
            
            <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-neon opacity-80 animate-float-xy" style="animation-delay: 0.5s; filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7));"></div>
            <div class="absolute top-1/3 right-1/3 w-3 h-3 rounded-full bg-plasma-light opacity-70 animate-float-xy" style="animation-delay: 1.2s; filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.7));"></div>
            <div class="absolute bottom-1/4 left-2/3 w-5 h-5 rounded-full bg-neon opacity-60 animate-float-xy" style="animation-delay: 2.3s; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9));"></div>
        </div>

<div class="container mx-auto px-6 py-32 relative z-10">
            <div class="flex flex-col lg:flex-row items-center gap-16">
                
                <div class="lg:w-1/2 space-y-8">
                    <div class="inline-flex items-center gap-3 px-4 py-2 bg-carbon rounded-full border border-opacity-20 border-steel animate-pulse-slow">
                        <span class="relative flex h-3 w-3">
                            <span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-neon opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-neon"></span>
                        </span>
                        <span class="text-xs font-mono tracking-widest text-neon">LATEST GENERATION</span>
                    </div>
                    
                    <h1 class="text-5xl md:text-6xl lg:text-7xl font-medium leading-tight">
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-steel to-neon">Holographic</span><br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-plasma-light to-neon">Sound Experience</span>
                    </h1>
                    
                    <p class="text-lg md:text-xl text-steel opacity-80 leading-relaxed max-w-2xl font-light">
                        Nebula Pro X9000 redefines audio immersion with quantum-tuned drivers and neural sound adaptation. Hear the difference that 40,000Hz of frequency response makes.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-4 pt-4">
                        <button class="relative overflow-hidden px-8 py-4 bg-gradient-to-r from-plasma to-plasma-dark text-white rounded-lg font-medium transition-all duration-500 hover:shadow-xl hover:shadow-plasma/30 group">
                            <span class="relative z-10">Pre-order Now</span>
                            <span class="absolute inset-0 bg-gradient-to-r from-plasma-light to-neon opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                        </button>
                        <button class="px-8 py-4 border-2 border-steel hover:border-neon text-steel hover:text-neon rounded-lg font-medium transition-all duration-300 flex items-center gap-2 group">
                            <span>Experience Demo</span>
                            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" 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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </button>
                    </div>
                    
                    <div class="pt-8 flex flex-wrap gap-6">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-plasma-dark flex items-center justify-center animate-pulse-slow">
                                <svg class="w-5 h-5 text-neon" 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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-mono">360° Spatial Audio</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-plasma-dark flex items-center justify-center animate-pulse-slow" style="animation-delay: 0.5s;">
                                <svg class="w-5 h-5 text-neon" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <span class="text-sm font-mono">40hr Playtime</span>
                        </div>
                    </div>
                </div>
                
                
                <div class="lg:w-1/2 relative">
                    <div class="relative max-w-2xl mx-auto">
                        
                        <div class="relative z-10 animate-glow">
                            <img src="https://images.unsplash.com/photo-1590658268037-6bf12165a8df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                                 alt="Nebula Pro X9000 Headphones" 
                                 class="w-full h-auto object-contain">
                        </div>
                        
                        
                        <div class="absolute -bottom-20 -left-20 w-64 h-64 rounded-full border-2 border-neon border-opacity-40 animate-pulse-slow -z-10" style="filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));"></div>
                        <div class="absolute -top-20 -right-20 w-80 h-80 rounded-full border-2 border-plasma-light border-opacity-30 animate-pulse-slow -z-10" style="animation-delay: 2s; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));"></div>
                        
                        
                        <div class="absolute -left-10 top-1/4 bg-carbon bg-opacity-90 backdrop-blur-sm p-4 rounded-lg border border-steel border-opacity-20 shadow-xl animate-float-xy" style="animation-delay: 0.7s;">
                            <div class="text-xs font-mono text-neon">FREQUENCY RANGE</div>
                            <div class="text-lg font-medium">5Hz-40kHz</div>
                        </div>
                        
                        <div class="absolute -right-10 bottom-1/4 bg-carbon bg-opacity-90 backdrop-blur-sm p-4 rounded-lg border border-steel border-opacity-20 shadow-xl animate-float-xy" style="animation-delay: 1.4s;">
                            <div class="text-xs font-mono text-neon">IMPEDANCE</div>
                            <div class="text-lg font-medium">32Ω</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20">
            <div class="flex flex-col items-center">
                <span class="text-xs font-mono text-steel opacity-80 mb-2 animate-pulse-slow">EXPLORE</span>
                <div class="relative w-8 h-12 rounded-full border-2 border-neon border-opacity-50 flex justify-center">
                    <div class="absolute top-2 w-1 h-4 bg-neon rounded-full animate-bounce"></div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Related Examples

Clean hero section

Author:
OmKar Mehta

1 year ago

3.3k
test
test

Author:
Anonymous

4 months ago

458
composent clean
composent clean

Author:
Omer fils ELENGA

1 day ago

7
Home
html , css

Author:
Hacker Development

6 months ago

547
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?

Author:
zobaidul kaziex

1 year ago

5.2k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

6 months ago

620
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.8k
Yoga Coach Hero Section

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

1 year ago

5.6k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

4 months ago

374
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

4.8k
Single Page Portfolio

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

10 months ago

2.1k
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

Author:
ishimwe prince

6 months ago

849

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components