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

691

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

Header + simple Hero Section

Author:
ABDO-SY

8 months ago

1.8k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

5 months ago

475
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

5 months ago

881
Hero example simply beautiful

Author:
Lucas Martinez

2 years ago

14k
onlinee
examination

Author:
Nezerwa Debora

5 months ago

345
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

4 months ago

856
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.1k
work hard
by salvator

Author:
Baraka Salvator

5 months ago

322
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

5 months ago

867
Hero section with bold heading

Author:
Abigail

2 years ago

11.5k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

19.4k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components