All Prompts
All Prompts
herosectionuitailwindresponsivemarketing
Audio Console Hero with Skeuomorphic UI
Полноэкранный Hero UI-компонент для аудио-консоли с скевоморфным дизайном. Идеален для лендингов SaaS, плагинов и аудио-инструментов.
Prompt
<main
class="lg:py-32 grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-8 z-10 w-full max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-20 pl-6 relative gap-x-16 gap-y-16 items-center">
<!-- Left: Typography & CTAs -->
<div class="lg:col-span-5 flex flex-col items-start gap-8 z-20">
<!-- Brand Logo -->
<div class="flex items-center gap-2 text-zinc-400 mb-4">
<div class="w-6 h-6 rounded flex items-center justify-center bg-zinc-900"
style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.5);">
<div class="w-2 h-2 rounded-full bg-orange-500" style="box-shadow: 0 0 8px rgba(249,115,22,0.8);"></div>
</div>
<span class="text-xs uppercase text-zinc-300 font-sans">A U R A L I S</span>
</div>
<h1 class="text-5xl lg:text-7xl text-transparent bg-clip-text bg-gradient-to-br from-white via-zinc-200 to-zinc-500 leading-tight font-google-sans-flex font-light tracking-tighter"
style="text-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px;">
Audio Processing.<br>Console Precision.
</h1>
<p class="text-base lg:text-lg text-zinc-400 leading-relaxed max-w-lg font-sans">
An AI-powered processing console that combines analog-style tactile control with intelligent signal shaping.
Dial in depth, tone, and clarity with mastering-grade precision.
</p>
<div class="flex flex-wrap items-center gap-4 mt-4">
<!-- Primary CTA (Tactile Button) -->
<button class="relative px-6 py-3 rounded-lg bg-zinc-800 text-sm text-orange-400 uppercase transition-transform active:scale-95 flex items-center gap-2 group overflow-hidden font-sans" style="box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 20px, rgba(255, 255, 255, 0.1) 0px 1px 1px inset, rgba(0, 0, 0, 0.5) 0px -2px 4px inset; border: 1px solid rgb(63, 63, 70);">
<div class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<iconify-icon icon="solar:tuning-square-linear" width="18" class="text-orange-500"></iconify-icon>
Open Console
</button>
<!-- Secondary CTA -->
<button class="px-6 py-3 rounded-lg text-sm text-zinc-300 hover:text-white transition-colors flex items-center gap-2 font-sans">
<iconify-icon icon="solar:play-circle-linear" width="20"></iconify-icon>
Hear the Difference
</button>
</div>
</div>
<!-- Right: Skeuomorphic Console -->
<div class="lg:col-span-7 flex justify-center lg:justify-end relative">
<!-- Console Chassis -->
<div class="w-full max-w-[600px] aspect-[4/3] rounded-3xl bg-zinc-900 p-2 relative"
style="box-shadow: 25px 25px 60px rgba(0,0,0,0.8), -10px -10px 40px rgba(255,255,255,0.03), inset 0 1px 2px rgba(255,255,255,0.1);">
<!-- Brushed Metal Faceplate -->
<div class="w-full h-full rounded-2xl bg-zinc-900 flex flex-col relative overflow-hidden"
style="box-shadow: inset 0 2px 3px rgba(255,255,255,0.08), inset 0 -2px 5px rgba(0,0,0,0.9); background: linear-gradient(145deg, #27272a 0%, #18181b 50%, #09090b 100%);">
<!-- Subtle noise texture overlay -->
<div class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
</div>
<!-- Chassis Screws -->
<div class="absolute top-4 left-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
<div
class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-45">
<div class="w-full h-px bg-zinc-950"></div>
<div class="h-full w-px bg-zinc-950 absolute"></div>
</div>
</div>
<div class="absolute top-4 right-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
<div
class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-[60deg]">
<div class="w-full h-px bg-zinc-950"></div>
<div class="h-full w-px bg-zinc-950 absolute"></div>
</div>
</div>
<div class="absolute bottom-4 left-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
<div
class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-12">
<div class="w-full h-px bg-zinc-950"></div>
<div class="h-full w-px bg-zinc-950 absolute"></div>
</div>
</div>
<div class="absolute bottom-4 right-4 w-4 h-4 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1);">
<div
class="w-2.5 h-2.5 rounded-full bg-gradient-to-br from-zinc-600 to-zinc-900 flex items-center justify-center rotate-[100deg]">
<div class="w-full h-px bg-zinc-950"></div>
<div class="h-full w-px bg-zinc-950 absolute"></div>
</div>
</div>
<!-- Top Section: Knobs & Switches -->
<div class="flex-1 flex px-8 pt-10 pb-4 relative z-10">
<!-- Left Group: Input / Output -->
<div class="w-1/4 flex flex-col justify-between items-center py-2">
<!-- Input Knob -->
<div class="flex flex-col items-center gap-3">
<span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Input Gain</span>
<div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
<!-- Scale dots -->
<svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
stroke-dasharray="2 10" class=""></circle>
</svg>
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform -rotate-45"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
<div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
</div>
</div>
</div>
<!-- Output Knob -->
<div class="flex flex-col items-center gap-3">
<span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Output</span>
<div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
<svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
stroke-dasharray="2 10" class=""></circle>
</svg>
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform rotate-12"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
<div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
</div>
</div>
</div>
</div>
<!-- Center: Giant Depth Dial -->
<div class="w-2/4 flex flex-col items-center justify-center relative">
<span class="text-xs text-zinc-300 uppercase mb-6 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Saturation</span>
<!-- Dial Container with recessed shadow -->
<div class="relative w-40 h-40 rounded-full bg-zinc-950 flex items-center justify-center"
style="box-shadow: inset 0 4px 10px rgba(0,0,0,1), inset 0 -1px 2px rgba(255,255,255,0.05), 0 1px 1px rgba(255,255,255,0.05);">
<!-- Neon Arc SVG -->
<svg class="absolute inset-2 w-[calc(100%-16px)] h-[calc(100%-16px)] transform -rotate-[135deg]"
viewBox="0 0 100 100">
<!-- Background track -->
<path d="M 20 80 A 42 42 0 1 1 80 80" fill="none" stroke="#18181b" stroke-width="4"
stroke-linecap="round" class=""></path>
<!-- Progress (Glowing) -->
<path d="M 20 80 A 42 42 0 1 1 80 80" fill="none" stroke="#f97316" stroke-width="4"
stroke-linecap="round" stroke-dasharray="190" stroke-dashoffset="60"
style="filter: drop-shadow(0 0 6px rgba(249,115,22,0.8));" class=""></path>
</svg>
<!-- The Physical Knob -->
<div class="w-28 h-28 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-900 flex items-center justify-center relative transform rotate-[60deg]"
style="box-shadow: 0 15px 25px rgba(0,0,0,0.9), inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -3px 5px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
<!-- Inner metallic ring -->
<div class="w-20 h-20 rounded-full bg-gradient-to-tl from-zinc-700 to-zinc-900"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.1);">
</div>
<!-- Indicator dot/line -->
<div class="absolute w-2 h-6 bg-orange-400 rounded-full top-2 left-1/2 -translate-x-1/2"
style="box-shadow: 0 0 8px rgba(249,115,22,0.8), inset 0 1px 1px rgba(255,255,255,0.8);">
</div>
</div>
</div>
</div>
<!-- Right Group: Toggles & Wet/Dry -->
<div class="w-1/4 flex flex-col justify-between items-center py-2">
<!-- Switches Row -->
<div class="flex gap-4 w-full justify-center">
<!-- Bypass Switch -->
<div class="flex flex-col items-center gap-2">
<div class="w-2 h-2 rounded-full bg-zinc-800"
style="box-shadow: inset 0 1px 2px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);">
</div> <!-- LED Off -->
<div class="w-8 h-12 bg-zinc-950 rounded-md relative flex justify-center py-1"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<!-- Switch Down -->
<div class="w-2.5 h-5 bg-gradient-to-b from-zinc-600 via-zinc-400 to-zinc-700 rounded-full relative z-10 bottom-0 absolute mb-1"
style="box-shadow: 0 3px 4px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.5); border: 1px solid #52525b;">
</div>
</div>
<span class="text-[9px] text-zinc-500 uppercase mt-1 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Bypass</span>
</div>
<!-- Engage Switch -->
<div class="flex flex-col items-center gap-2">
<div class="w-2 h-2 rounded-full bg-orange-500"
style="box-shadow: 0 0 8px rgba(249,115,22,0.8), inset 0 1px 1px rgba(255,255,255,0.5);">
</div> <!-- LED On -->
<div class="w-8 h-12 bg-zinc-950 rounded-md relative flex justify-center py-1"
style="box-shadow: inset 0 2px 4px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<!-- Switch Up -->
<div class="w-2.5 h-5 bg-gradient-to-b from-zinc-300 via-white to-zinc-400 rounded-full relative z-10 top-0 absolute mt-1"
style="box-shadow: 0 5px 6px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.8); border: 1px solid #71717a;">
</div>
</div>
<span class="text-[9px] text-zinc-300 uppercase mt-1 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Engage</span>
</div>
</div>
<!-- Wet/Dry Knob -->
<div class="flex flex-col items-center gap-3 mt-4">
<span class="text-[10px] text-zinc-400 uppercase font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">Wet / Dry</span>
<div class="relative w-16 h-16 rounded-full bg-zinc-800 flex items-center justify-center"
style="box-shadow: 0 8px 15px -3px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.1), inset 0 -2px 4px rgba(0,0,0,0.6);">
<svg class="absolute inset-1 w-[calc(100%-8px)] h-[calc(100%-8px)]"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="none" stroke="#3f3f46" stroke-width="2"
stroke-dasharray="2 10" class=""></circle>
</svg>
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-600 via-zinc-800 to-zinc-950 relative transform rotate-45"
style="box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 2px 5px rgba(0,0,0,0.5);">
<div class="absolute w-1 h-3 bg-white rounded-full top-1 left-1/2 -translate-x-1/2"
style="box-shadow: 0 0 3px rgba(255,255,255,0.5);"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Divider Line -->
<div class="w-[90%] mx-auto h-px bg-zinc-950 relative z-10"
style="box-shadow: 0 1px 0 rgba(255,255,255,0.05);"></div>
<!-- Bottom Section: EQ Faders -->
<div class="h-[40%] flex justify-between px-16 pt-6 pb-8 relative z-10">
<!-- Fader 1 (80Hz) -->
<div class="flex flex-col items-center gap-4 w-12">
<span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">80Hz</span>
<div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<!-- Scale lines -->
<div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-4 bg-zinc-600 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
</div>
<!-- The Cap -->
<div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[20%]"
style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
<div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
</div>
</div>
</div>
</div>
<!-- Fader 2 (400Hz) -->
<div class="flex flex-col items-center gap-4 w-12">
<span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">400Hz</span>
<div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-4 bg-zinc-600 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
</div>
<div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[60%]"
style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
<div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
</div>
</div>
</div>
</div>
<!-- Fader 3 (2kHz) -->
<div class="flex flex-col items-center gap-4 w-12">
<span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">2kHz</span>
<div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-4 bg-zinc-600 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
</div>
<div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[45%]"
style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
<div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
</div>
</div>
</div>
</div>
<!-- Fader 4 (8kHz) -->
<div class="flex flex-col items-center gap-4 w-12">
<span class="text-[10px] text-zinc-500 font-sans" style="text-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px, rgba(0, 0, 0, 0.8) 0px -1px 0px;">8kHz</span>
<div class="flex-1 w-2.5 bg-zinc-950 rounded-full relative flex justify-center"
style="box-shadow: inset 0 2px 5px rgba(0,0,0,1), inset 0 -1px 1px rgba(255,255,255,0.05), 0 1px 0 rgba(255,255,255,0.05);">
<div class="absolute h-full w-8 flex flex-col justify-between py-2 pointer-events-none">
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-4 bg-zinc-600 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
<div class="h-px w-1 bg-zinc-800 mx-auto"></div>
<div class="h-px w-2 bg-zinc-700 mx-auto"></div>
</div>
<div class="absolute w-7 h-10 bg-gradient-to-b from-zinc-600 via-zinc-800 to-zinc-900 rounded-[3px] z-10 bottom-[75%]"
style="box-shadow: 0 8px 12px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.8); border: 1px solid #3f3f46;">
<div class="absolute top-1/2 left-1 right-1 h-1 bg-zinc-950 -translate-y-1/2 rounded-full"
style="box-shadow: inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(255,255,255,0.2);">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>