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

189

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

Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

3 months ago

822
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

11 months ago

1.6k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

2 months ago

149
Design
by salvator

Author:
Baraka Salvator

1 month ago

114
portifolio
skills

Author:
ishimwe prince

1 month ago

131
Hero section for website

Author:
Leon Bachmann

2 years ago

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

11 months ago

2.1k
new potifolio
How to Build a Powerful Web Developer Portfolio (With Examples!)

Author:
Augustin

1 month ago

267
Hero Section with Dark Mode
Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

Author:
Rathanak Phan

1 week ago

5
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

4 months ago

752
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

10 months ago

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

Author:
ORGIN_DREAMS

1 month ago

180

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components