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

977

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

Hero Section

Author:
Amine Ghanim

9 months ago

2k
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:
zobaidul kaziex

1 year ago

2.6k
Hero

Author:
ORGIN_DREAMS

8 months ago

1.1k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

482
Hero section with button

Author:
Samuel Dawson

3 years ago

12.7k
login form
this login form it will be used for sign in to every website

Author:
nii fanny

7 months ago

449
Minimalist Hero Section
A minimal but nice hero section.

Author:
VoltagedDev

1 year ago

1.9k
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

1 year ago

1.7k
Hero banner

Author:
Laurits

2 years ago

12.2k
onlinee
examination

Author:
Nezerwa Debora

7 months ago

571
Extra large hero

Author:
Gbenga Adegoke

2 years ago

10.6k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

7 months ago

818

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components