All Prompts
All Prompts
cardtailwindaudiodashboardcontrol-panelneumorphicui
Neumorphic Audio Instrument Control Panel UI
Нейроморфная панель управления аудиоинструментом. UI для музыкальных приложений, DAW, дашбордов. Включает VU-метр, регуляторы, кнопки.
Prompt
<div class="min-h-screen flex items-center justify-center bg-black">
<div
class="md:p-10 flex flex-col md:flex-row gap-6 md:gap-8 bg-[#22242a] w-full max-w-[900px] border-[#2d2f36] border rounded-[2rem] pt-6 pr-6 pb-6 pl-6 relative shadow-[0_30px_60px_rgba(0,0,0,0.8),inset_0_2px_3px_rgba(255,255,255,0.05),inset_0_-2px_8px_rgba(0,0,0,0.6)]"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1)">
<!-- Subtle Corner Details (Screws/Indents) -->
<div
class="absolute top-4 left-4 w-2 h-2 rounded-full bg-[#18191d] shadow-[inset_0_1px_1px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)]">
</div>
<div
class="absolute top-4 right-4 w-2 h-2 rounded-full bg-[#18191d] shadow-[inset_0_1px_1px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)]">
</div>
<div
class="absolute bottom-4 left-4 w-2 h-2 rounded-full bg-[#18191d] shadow-[inset_0_1px_1px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)]">
</div>
<div
class="absolute bottom-4 right-4 w-2 h-2 rounded-full bg-[#18191d] shadow-[inset_0_1px_1px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)]">
</div>
<!-- Left Column (Main Controls) -->
<div class="flex-1 flex flex-col gap-8">
<!-- Top Screen Display -->
<div
class="bg-[#0e1014] rounded-2xl p-5 shadow-[inset_0_6px_15px_rgba(0,0,0,0.9),inset_0_1px_3px_rgba(0,0,0,1),0_1px_1px_rgba(255,255,255,0.08)] border border-[#1a1c23]">
<!-- Header -->
<div class="flex justify-between items-start mb-6">
<div>
<div class="text-xs text-[#585c6b] tracking-[0.2em] uppercase mb-1">Instrument</div>
<div class="text-2xl font-mono text-[#e4e7ec] tracking-tight drop-shadow-[0_0_4px_rgba(255,255,255,0.2)]">
CRYSTAL BELLS</div>
</div>
<div class="flex gap-4 text-[#343844] mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="plug"
aria-hidden="true" class="lucide lucide-plug w-5 h-5">
<path d="M12 22v-5" class=""></path>
<path d="M15 8V2" class=""></path>
<path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z" class=""></path>
<path d="M9 8V2" class=""></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="gauge" aria-hidden="true" class="lucide lucide-gauge w-5 h-5">
<path d="m12 14 4-4" class=""></path>
<path d="M3.34 19a10 10 0 1 1 17.32 0" class=""></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
data-lucide="hammer" aria-hidden="true" class="lucide lucide-hammer w-5 h-5">
<path d="m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9" class=""></path>
<path d="m18 15 4-4" class=""></path>
<path
d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5"
class=""></path>
</svg>
</div>
</div>
<!-- Stats & VU Meter -->
<div class="flex flex-wrap justify-between items-end gap-6">
<!-- Stats Grid -->
<div class="flex gap-6 md:gap-8">
<div>
<div class="text-xs text-[#585c6b] tracking-[0.15em] uppercase mb-1">Volume</div>
<div
class="text-xl font-mono text-[#5c85ff] tracking-tight [text-shadow:0_0_10px_rgba(92,133,255,0.8),0_0_20px_rgba(92,133,255,0.4)]">
100%</div>
</div>
<div>
<div class="text-xs text-[#585c6b] tracking-[0.15em] uppercase mb-1">Tempo</div>
<div class="text-xl font-mono text-[#a3a8b5] tracking-tight">128</div>
</div>
<div>
<div class="text-xs text-[#585c6b] tracking-[0.15em] uppercase mb-1">Signature</div>
<div class="text-xl font-mono text-[#a3a8b5] tracking-tight">4/4</div>
</div>
<div>
<div class="text-xs text-[#585c6b] tracking-[0.15em] uppercase mb-1">Key</div>
<div class="text-xl font-mono text-[#a3a8b5] tracking-tight">D#</div>
</div>
</div>
<!-- Horizontal VU Meter -->
<div
class="flex flex-col gap-[3px] w-full max-w-[200px] bg-[#090a0d] p-1.5 rounded-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.8)] border border-[#15171d]">
<!-- Top Row (Green) -->
<div class="flex gap-[2px] h-3">
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-90 rounded-[1px] shadow-[0_0_6px_rgba(34,197,94,0.6)]"></div>
<div class="flex-1 bg-[#22c55e] opacity-40 rounded-[1px]"></div>
<div class="flex-1 bg-[#22c55e] opacity-40 rounded-[1px]"></div>
<div class="flex-1 bg-[#22c55e] opacity-40 rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
</div>
<!-- Bottom Row (Blue/Purple) -->
<div class="flex gap-[2px] h-3">
<div class="flex-1 bg-[#3b82f6] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(59,130,246,0.8)]"></div>
<div class="flex-1 bg-[#3b82f6] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(59,130,246,0.8)]"></div>
<div class="flex-1 bg-[#4f46e5] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(79,70,229,0.8)]"></div>
<div class="flex-1 bg-[#4f46e5] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(79,70,229,0.8)]"></div>
<div class="flex-1 bg-[#6366f1] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(99,102,241,0.8)]"></div>
<div class="flex-1 bg-[#8b5cf6] opacity-90 rounded-[1px] shadow-[0_0_8px_rgba(139,92,246,0.8)]"></div>
<div class="flex-1 bg-[#a855f7] opacity-90 rounded-[1px] shadow-[0_0_10px_rgba(168,85,247,0.9)]"></div>
<div class="flex-1 bg-[#c084fc] opacity-90 rounded-[1px] shadow-[0_0_10px_rgba(192,132,252,0.9)]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
<div class="flex-1 bg-[#1a1c23] rounded-[1px]"></div>
</div>
</div>
</div>
</div>
<!-- Middle Row Controls -->
<div class="flex flex-wrap items-center justify-between gap-6">
<!-- Group 1: Power Buttons -->
<div class="flex items-center gap-4">
<!-- Standard Power Button -->
<button class="w-[72px] h-[72px] rounded-full bg-[#24262b] shadow-[0_10px_15px_rgba(0,0,0,0.6),inset_0_2px_4px_rgba(255,255,255,0.08),inset_0_-2px_6px_rgba(0,0,0,0.5)] border border-[#32343c] flex items-center justify-center group active:shadow-[0_2px_5px_rgba(0,0,0,0.6),inset_0_4px_8px_rgba(0,0,0,0.8)] transition-all">
<div class="w-14 h-14 rounded-full bg-[#1e2025] shadow-[inset_0_4px_8px_rgba(0,0,0,0.6),0_1px_1px_rgba(255,255,255,0.05)] border border-[#15161a] flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="power" aria-hidden="true" class="lucide lucide-power w-6 h-6 text-[#121316] group-active:text-[#3a3d46]"><path d="M12 2v10" class=""></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04" class=""></path></svg>
</div>
</button>
<!-- Glowing Power Button -->
<button class="w-[84px] h-[84px] rounded-full bg-[#202227] shadow-[0_15px_25px_rgba(0,0,0,0.7),inset_0_2px_4px_rgba(255,255,255,0.08),inset_0_-2px_6px_rgba(0,0,0,0.5)] border border-[#2d2f36] flex items-center justify-center relative">
<!-- Glow effect -->
<div class="absolute inset-2 rounded-full bg-[radial-gradient(circle_at_center,#ffffff_0%,#c084fc_20%,#5c85ff_50%,transparent_80%)] opacity-80 blur-md"></div>
<!-- Inner Button -->
<div class="relative w-16 h-16 rounded-full bg-[radial-gradient(circle_at_center,#e9d5ff_0%,#a855f7_40%,#3b82f6_80%)] shadow-[inset_0_2px_6px_rgba(255,255,255,0.8),inset_0_-4px_8px_rgba(0,0,0,0.4),0_0_20px_rgba(92,133,255,0.6)] flex items-center justify-center border border-[#c084fc]/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="power" aria-hidden="true" class="lucide lucide-power w-7 h-7 text-white drop-shadow-[0_0_5px_rgba(255,255,255,1)]"><path d="M12 2v10" class=""></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04" class=""></path></svg>
</div>
</button>
</div>
<!-- Center Label Button -->
<button class="flex-1 min-w-[180px] h-[72px] rounded-xl bg-[#24262b] shadow-[0_8px_15px_rgba(0,0,0,0.5),inset_0_2px_3px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.5)] border border-[#32343c] flex items-center justify-center relative active:shadow-[0_2px_5px_rgba(0,0,0,0.6),inset_0_4px_8px_rgba(0,0,0,0.8)] transition-all">
<!-- Indented text area -->
<div class="absolute inset-2 bg-[#1e2025] rounded-lg shadow-[inset_0_3px_6px_rgba(0,0,0,0.6),0_1px_0_rgba(255,255,255,0.05)] border border-[#15161a] flex items-center justify-center">
<span class="text-[#84899c] text-lg font-medium drop-shadow-[0_-1px_1px_rgba(0,0,0,0.8)]">Label here</span>
</div>
<!-- Tiny indicator light -->
<div class="absolute top-4 right-4 w-1.5 h-1.5 rounded-full bg-[#5c85ff] shadow-[0_0_6px_rgba(92,133,255,1)]"></div>
</button>
<!-- Rotary Knob -->
<div class="relative w-[84px] h-[84px] flex items-center justify-center">
<!-- Glowing Ticks Ring (Simulated with custom CSS mask) -->
<div class="absolute inset-[-10px] rounded-full pointer-events-none" style="background: repeating-conic-gradient(from -135deg, #5c85ff 0deg, #5c85ff 2deg, transparent 2deg, transparent 8deg);
mask-image: radial-gradient(transparent 65%, black 66%);
-webkit-mask-image: radial-gradient(transparent 65%, black 66%);
clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
opacity: 0.8;
filter: drop-shadow(0 0 4px #5c85ff);">
</div>
<!-- Knob Base/Recess -->
<div
class="w-[72px] h-[72px] rounded-full bg-[#181a1f] shadow-[inset_0_6px_10px_rgba(0,0,0,0.8),0_1px_2px_rgba(255,255,255,0.08)] border border-[#111215] flex items-center justify-center">
<!-- Metallic Knob Top -->
<div
class="w-14 h-14 rounded-full bg-[conic-gradient(from_0deg_at_50%_50%,#3d3f46_0%,#202227_20%,#4a4c54_50%,#202227_80%,#3d3f46_100%)] shadow-[0_8px_15px_rgba(0,0,0,0.7),inset_0_1px_1px_rgba(255,255,255,0.2),inset_0_-1px_2px_rgba(0,0,0,0.6)] border border-[#2d2f36] relative cursor-pointer transform -rotate-45">
<!-- Indicator indent -->
<div
class="absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-[#15161a] shadow-[inset_0_1px_2px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.1)]">
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Row Controls -->
<div class="flex items-center gap-6">
<!-- Grouped Buttons -->
<div
class="flex-1 flex rounded-xl bg-[#24262b] shadow-[0_8px_15px_rgba(0,0,0,0.5),inset_0_2px_3px_rgba(255,255,255,0.08),inset_0_-2px_4px_rgba(0,0,0,0.5)] border border-[#32343c] overflow-hidden">
<button class="flex-1 h-[64px] border-r border-[#1a1c23] flex items-center justify-center relative hover:bg-[#282b31] active:shadow-[inset_0_4px_8px_rgba(0,0,0,0.6)] transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" aria-hidden="true" class="lucide lucide-play w-6 h-6 text-[#16181d] fill-[#16181d] group-active:text-[#3a3d46] group-active:fill-[#3a3d46]"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z" class=""></path></svg>
</button>
<button class="flex-1 h-[64px] border-r border-[#1a1c23] flex items-center justify-center relative hover:bg-[#282b31] active:shadow-[inset_0_4px_8px_rgba(0,0,0,0.6)] transition-all group shadow-[inset_0_4px_8px_rgba(0,0,0,0.4)] bg-[#1e2025]"> <!-- Simulated Active State -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="audio-lines" aria-hidden="true" class="lucide lucide-audio-lines w-6 h-6 text-[#16181d]"><path d="M2 10v3" class=""></path><path d="M6 6v11" class=""></path><path d="M10 3v18" class=""></path><path d="M14 8v7" class=""></path><path d="M18 5v13" class=""></path><path d="M22 10v3" class=""></path></svg>
</button>
<button class="flex-1 h-[64px] flex items-center justify-center relative hover:bg-[#282b31] active:shadow-[inset_0_4px_8px_rgba(0,0,0,0.6)] transition-all group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="piano" aria-hidden="true" class="lucide lucide-piano w-6 h-6 text-[#16181d] group-active:text-[#3a3d46]"><path d="M18.5 8c-1.4 0-2.6-.8-3.2-2A6.87 6.87 0 0 0 2 9v11a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-8.5C22 9.6 20.4 8 18.5 8" class=""></path><path d="M2 14h20" class=""></path><path d="M6 14v4" class=""></path><path d="M10 14v4" class=""></path><path d="M14 14v4" class=""></path><path d="M18 14v4" class=""></path></svg>
</button>
</div>
<!-- Single Power Button Right -->
<button class="w-[72px] h-[72px] rounded-full bg-[#24262b] shadow-[0_10px_15px_rgba(0,0,0,0.6),inset_0_2px_4px_rgba(255,255,255,0.08),inset_0_-2px_6px_rgba(0,0,0,0.5)] border border-[#32343c] flex items-center justify-center group active:shadow-[0_2px_5px_rgba(0,0,0,0.6),inset_0_4px_8px_rgba(0,0,0,0.8)] transition-all">
<div class="w-14 h-14 rounded-full bg-[#1e2025] shadow-[inset_0_4px_8px_rgba(0,0,0,0.6),0_1px_1px_rgba(255,255,255,0.05)] border border-[#15161a] flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="power" aria-hidden="true" class="lucide lucide-power w-6 h-6 text-[#121316] group-active:text-[#3a3d46]"><path d="M12 2v10" class=""></path><path d="M18.4 6.6a9 9 0 1 1-12.77.04" class=""></path></svg>
</div>
</button>
</div>
<!-- Bottom Slider -->
<div class="relative w-full h-[32px] flex items-center mt-2">
<!-- Track -->
<div
class="absolute left-0 right-0 h-[10px] rounded-full bg-[#0e1014] shadow-[inset_0_3px_6px_rgba(0,0,0,0.9),0_1px_1px_rgba(255,255,255,0.05)] border border-[#1a1c23]">
</div>
<!-- Thumb Container -->
<div class="absolute left-[10%] w-[28px] h-[28px] -ml-[14px] cursor-pointer">
<!-- Metallic Thumb -->
<div
class="w-full h-full rounded-full bg-[conic-gradient(from_0deg_at_50%_50%,#4a4c54_0%,#202227_30%,#5a5d66_50%,#202227_70%,#4a4c54_100%)] shadow-[0_4px_8px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.3),inset_0_-1px_2px_rgba(0,0,0,0.6)] border border-[#32343c]">
</div>
</div>
</div>
</div>
<!-- Right Column (Waveform Display) -->
<div
class="w-full md:w-[160px] bg-[#16181d] rounded-[1.5rem] p-4 shadow-[0_15px_30px_rgba(0,0,0,0.6),inset_0_2px_3px_rgba(255,255,255,0.05),inset_0_-2px_5px_rgba(0,0,0,0.5)] border border-[#2d2f36]">
<!-- Inner Screen -->
<div
class="h-full bg-[#090a0d] rounded-xl p-4 shadow-[inset_0_6px_15px_rgba(0,0,0,0.9),0_1px_1px_rgba(255,255,255,0.05)] border border-[#15171d] flex flex-col items-center">
<!-- Time Label -->
<div class="text-center mb-6 w-full">
<div class="text-[10px] text-[#585c6b] tracking-[0.2em] uppercase mb-1">Time</div>
<div class="text-2xl font-mono text-[#a3a8b5] tracking-tight">02:35</div>
</div>
<!-- Vertical Waveform -->
<div class="flex-1 flex flex-col justify-center items-center gap-[4px] w-full max-w-[80px]">
<!-- Top (Dim) -->
<div class="h-[2px] w-[20%] bg-[#1a1c23] rounded-full"></div>
<div class="h-[2px] w-[40%] bg-[#1a1c23] rounded-full"></div>
<div class="h-[2px] w-[60%] bg-[#242731] rounded-full"></div>
<div class="h-[2px] w-[80%] bg-[#242731] rounded-full"></div>
<div class="h-[2px] w-[50%] bg-[#242731] rounded-full"></div>
<div class="h-[2px] w-[90%] bg-[#242731] rounded-full"></div>
<div class="h-[2px] w-[100%] bg-[#343844] rounded-full"></div>
<div class="h-[2px] w-[70%] bg-[#343844] rounded-full"></div>
<div class="h-[2px] w-[40%] bg-[#343844] rounded-full"></div>
<div class="h-[2px] w-[80%] bg-[#343844] rounded-full"></div>
<div class="h-[2px] w-[60%] bg-[#343844] rounded-full"></div>
<div class="h-4"></div> <!-- Spacer -->
<!-- Bottom (Glowing Purple/Blue) -->
<div class="h-[2px] w-[50%] bg-[#8b5cf6] rounded-full shadow-[0_0_8px_rgba(139,92,246,0.8)]"></div>
<div class="h-[2px] w-[90%] bg-[#a855f7] rounded-full shadow-[0_0_10px_rgba(168,85,247,0.9)]"></div>
<div class="h-[2px] w-[100%] bg-[#c084fc] rounded-full shadow-[0_0_12px_rgba(192,132,252,1)]"></div>
<div class="h-[2px] w-[70%] bg-[#a855f7] rounded-full shadow-[0_0_10px_rgba(168,85,247,0.9)]"></div>
<div class="h-[2px] w-[40%] bg-[#8b5cf6] rounded-full shadow-[0_0_8px_rgba(139,92,246,0.8)]"></div>
<div class="h-[2px] w-[80%] bg-[#6366f1] rounded-full shadow-[0_0_8px_rgba(99,102,241,0.8)]"></div>
<div class="h-[2px] w-[100%] bg-[#4f46e5] rounded-full shadow-[0_0_10px_rgba(79,70,229,0.9)]"></div>
<div class="h-[2px] w-[60%] bg-[#3b82f6] rounded-full shadow-[0_0_8px_rgba(59,130,246,0.8)]"></div>
<div class="h-[2px] w-[40%] bg-[#3b82f6] rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]"></div>
<div class="h-[2px] w-[20%] bg-[#2563eb] rounded-full shadow-[0_0_4px_rgba(37,99,235,0.5)]"></div>
</div>
</div>
</div>
</div>