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

667

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

Background image section

Author:
Marc

1 year ago

6.1k
Creative Hero Section

Author:
Ijila Itunu

5 months ago

862
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

6 months ago

423
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.5k
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

4 months ago

689
Hero section with search

Author:
TailwindFlex

3 years ago

11.6k
Hero simple
hero design simple

Author:
QQ-VVN

5 months ago

836
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

684
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

833
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

6 months ago

1k
Cyamunara
used to sell everything someone need to sell

Author:
INGRIDE MUZIRANENGE

4 months ago

559

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components