All Prompts
All Prompts
carduiinteractivekeyboardaudiotailwind
Synth Keyboard UI Card with Knobs and Switch
UI-карточка синтезатора с ручками, переключателем и интерактивной клавиатурой. Идеально для музыкальных приложений и аудио плагинов.
Prompt
<div class="min-h-screen flex items-center justify-center bg-black"><div
class="bg-gradient-to-b from-[#3a3e4a] via-[#242730] to-[#1a1c22] w-full max-w-[800px] ring-black/50 ring-1 rounded-[3rem] pt-1 pr-1 pb-1 pl-1 relative shadow-[0_40px_80px_-20px_rgba(0,0,0,0.9),inset_0_1px_1px_rgba(255,255,255,0.1)]"
data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(1)">
<!-- Faint technological contour line overlay -->
<svg class="absolute inset-0 w-full h-full pointer-events-none p-3" fill="none" viewBox="0 0 100 100"
preserveAspectRatio="none">
<rect x="2%" y="4%" width="96%" height="92%" rx="40" stroke="rgba(255,255,255,0.03)" stroke-width="0.5" class="">
</rect>
<path d="M 25% 4% L 35% 4% L 38% 6% L 62% 6% L 65% 4% L 75% 4%" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"
vector-effect="non-scaling-stroke" class=""></path>
</svg>
<!-- Inner Device Plate -->
<div
class="relative h-full w-full rounded-[2.8rem] bg-[#22242b] p-6 sm:p-10 shadow-[inset_0_4px_20px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.05)] border border-[#16181d]">
<!-- Top Controls Section -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-8 sm:gap-4 mb-10 px-2 sm:px-8">
<!-- Modulation Group -->
<div class="flex-1 flex flex-col items-center w-full">
<!-- Section Header -->
<div class="flex items-center w-full gap-3 mb-6">
<div class="h-px flex-1 bg-gradient-to-r from-transparent to-[#4a4f5c]"></div>
<span class="text-xs font-medium tracking-[0.2em] text-[#7a8190] uppercase">
Oscillator
</span>
<div class="h-px w-8 bg-gradient-to-l from-transparent to-[#4a4f5c]"></div>
</div>
<!-- Knobs -->
<div class="flex gap-8 sm:gap-12">
<!-- Rate Knob -->
<div class="flex flex-col items-center gap-3">
<div
class="w-16 h-16 rounded-full bg-[#131519] shadow-[inset_0_4px_8px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] border border-[#0a0b0e] flex items-center justify-center relative group">
<!-- Knob Body -->
<div
class="w-11 h-11 rounded-full bg-gradient-to-br from-[#3b3f4a] via-[#242730] to-[#181a20] shadow-[0_8px_10px_-2px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.15)] border border-[#111216] relative transition-transform group-active:scale-95 group-active:shadow-[0_4px_5px_-2px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.15)] cursor-pointer">
<!-- Indicator Dot -->
<div
class="absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-[#a0a5b0] shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)] transform -rotate-45 origin-[50%_18px]">
</div>
</div>
</div>
<span class="text-xs font-medium text-[#6b7280]">Rate</span>
</div>
<!-- Depth Knob (Active) -->
<div class="flex flex-col items-center gap-3">
<div
class="w-16 h-16 rounded-full bg-[#131519] shadow-[inset_0_4px_8px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] border border-[#0a0b0e] flex items-center justify-center relative group">
<!-- Glow Arc (SVG) -->
<svg class="absolute inset-0 w-full h-full -rotate-90 pointer-events-none" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="37" fill="none" stroke="#e2e8f0" stroke-width="2.5" stroke-dasharray="90 250"
stroke-linecap="round" class="opacity-90 drop-shadow-[0_0_8px_rgba(214,228,255,0.6)]"></circle>
</svg>
<!-- Knob Body -->
<div
class="w-11 h-11 rounded-full bg-gradient-to-br from-[#3b3f4a] via-[#242730] to-[#181a20] shadow-[0_8px_10px_-2px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.15)] border border-[#111216] relative transition-transform group-active:scale-95 cursor-pointer">
<!-- Indicator Dot -->
<div
class="absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-white shadow-[0_0_4px_rgba(255,255,255,0.8)] transform rotate-[30deg] origin-[50%_18px]">
</div>
</div>
</div>
<span class="text-xs font-medium text-[#6b7280]">Depth</span>
</div>
</div>
</div>
<!-- Center Switch -->
<div class="flex items-center justify-center pt-6 px-4">
<div
class="w-5 h-10 rounded-full bg-[#0f1115] shadow-[inset_0_6px_10px_rgba(0,0,0,0.9),0_1px_0_rgba(255,255,255,0.03)] border border-[#050608] relative flex justify-center cursor-pointer">
<div
class="absolute bottom-[2px] w-[14px] h-[18px] rounded-[6px] bg-gradient-to-b from-[#3a3d46] to-[#24262d] shadow-[0_3px_4px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.15),inset_0_-1px_1px_rgba(0,0,0,0.4)] border border-[#1a1c22]">
</div>
</div>
</div>
<!-- Tremolo Group -->
<div class="flex-1 flex flex-col items-center w-full">
<!-- Section Header -->
<div class="flex items-center w-full gap-3 mb-6">
<div class="h-px w-8 bg-gradient-to-r from-transparent to-[#4a4f5c]"></div>
<span class="text-xs font-medium tracking-[0.2em] text-[#7a8190] uppercase">
Filter
</span>
<div class="h-px flex-1 bg-gradient-to-l from-transparent to-[#4a4f5c]"></div>
</div>
<!-- Knobs -->
<div class="flex gap-8 sm:gap-12">
<!-- Rate Knob (Slight Active) -->
<div class="flex flex-col items-center gap-3">
<div
class="w-16 h-16 rounded-full bg-[#131519] shadow-[inset_0_4px_8px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] border border-[#0a0b0e] flex items-center justify-center relative group">
<!-- Glow Arc (SVG) - Fainter -->
<svg class="absolute inset-0 w-full h-full -rotate-90 pointer-events-none" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="37" fill="none" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="30 250"
stroke-linecap="round" class="opacity-60 drop-shadow-[0_0_4px_rgba(214,228,255,0.3)]"></circle>
</svg>
<!-- Knob Body -->
<div
class="w-11 h-11 rounded-full bg-gradient-to-br from-[#3b3f4a] via-[#242730] to-[#181a20] shadow-[0_8px_10px_-2px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.15)] border border-[#111216] relative transition-transform group-active:scale-95 cursor-pointer">
<!-- Indicator Dot -->
<div
class="absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-[#e2e8f0] shadow-[0_0_2px_rgba(255,255,255,0.5)] transform -rotate-[60deg] origin-[50%_18px]">
</div>
</div>
</div>
<span class="text-xs font-medium text-[#6b7280]">Rate</span>
</div>
<!-- Depth Knob -->
<div class="flex flex-col items-center gap-3">
<div
class="w-16 h-16 rounded-full bg-[#131519] shadow-[inset_0_4px_8px_rgba(0,0,0,0.8),0_1px_0_rgba(255,255,255,0.05)] border border-[#0a0b0e] flex items-center justify-center relative group">
<!-- Knob Body -->
<div
class="w-11 h-11 rounded-full bg-gradient-to-br from-[#3b3f4a] via-[#242730] to-[#181a20] shadow-[0_8px_10px_-2px_rgba(0,0,0,0.8),inset_0_1px_2px_rgba(255,255,255,0.15)] border border-[#111216] relative transition-transform group-active:scale-95 cursor-pointer">
<!-- Indicator Dot -->
<div
class="absolute top-2 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-[#a0a5b0] shadow-[inset_0_1px_1px_rgba(0,0,0,0.5)] transform rotate-[-120deg] origin-[50%_18px]">
</div>
</div>
</div>
<span class="text-xs font-medium text-[#6b7280]">Depth</span>
</div>
</div>
</div>
</div>
<!-- Keyboard Section -->
<div
class="relative w-full h-40 sm:h-48 bg-[#08090b] rounded-2xl p-1.5 sm:p-2 shadow-[inset_0_10px_20px_rgba(0,0,0,0.9),inset_0_2px_4px_rgba(0,0,0,0.5),0_1px_0_rgba(255,255,255,0.05)] border border-black overflow-hidden">
<!-- Inner shadow to simulate the depth of the casing around keys -->
<div
class="absolute inset-0 z-20 pointer-events-none rounded-2xl shadow-[inset_0_4px_8px_rgba(0,0,0,0.6),inset_0_-2px_6px_rgba(0,0,0,0.4)]">
</div>
<div class="relative flex w-full h-full gap-[2px] sm:gap-1">
<!-- 8 White Keys -->
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 active:shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_2px_2px_rgba(0,0,0,0.3)] cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<div
class="flex-1 bg-gradient-to-b from-[#e8eaf0] via-[#cfd3dd] to-[#a3a8b5] rounded-b-xl shadow-[inset_0_1px_0_rgba(255,255,255,0.9),inset_1px_0_2px_rgba(255,255,255,0.6),inset_-1px_0_2px_rgba(0,0,0,0.15),0_6px_6px_-2px_rgba(0,0,0,0.3)] relative z-0 active:translate-y-1 cursor-pointer transition-transform duration-75">
</div>
<!-- 5 Black Keys Absolute Container -->
<!-- 100% / 8 keys = 12.5% per white key. Black keys sit on the borders. -->
<div class="absolute inset-0 z-10 pointer-events-none">
<!-- C# -->
<div
class="absolute top-0 left-[12.5%] w-[8%] sm:w-[7%] h-[62%] -translate-x-1/2 bg-gradient-to-b from-[#2a2c33] to-[#121318] rounded-b-md shadow-[inset_0_2px_1px_rgba(255,255,255,0.1),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(0,0,0,0.5),0_12px_15px_-3px_rgba(0,0,0,0.9)] border-t border-[#4b5563] pointer-events-auto active:translate-y-1 transition-transform duration-75 cursor-pointer">
</div>
<!-- D# -->
<div
class="absolute top-0 left-[25%] w-[8%] sm:w-[7%] h-[62%] -translate-x-1/2 bg-gradient-to-b from-[#2a2c33] to-[#121318] rounded-b-md shadow-[inset_0_2px_1px_rgba(255,255,255,0.1),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(0,0,0,0.5),0_12px_15px_-3px_rgba(0,0,0,0.9)] border-t border-[#4b5563] pointer-events-auto active:translate-y-1 transition-transform duration-75 cursor-pointer">
</div>
<!-- Gap at E/F (37.5%) -->
<!-- F# -->
<div
class="absolute top-0 left-[50%] w-[8%] sm:w-[7%] h-[62%] -translate-x-1/2 bg-gradient-to-b from-[#2a2c33] to-[#121318] rounded-b-md shadow-[inset_0_2px_1px_rgba(255,255,255,0.1),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(0,0,0,0.5),0_12px_15px_-3px_rgba(0,0,0,0.9)] border-t border-[#4b5563] pointer-events-auto active:translate-y-1 transition-transform duration-75 cursor-pointer">
</div>
<!-- G# -->
<div
class="absolute top-0 left-[62.5%] w-[8%] sm:w-[7%] h-[62%] -translate-x-1/2 bg-gradient-to-b from-[#2a2c33] to-[#121318] rounded-b-md shadow-[inset_0_2px_1px_rgba(255,255,255,0.1),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(0,0,0,0.5),0_12px_15px_-3px_rgba(0,0,0,0.9)] border-t border-[#4b5563] pointer-events-auto active:translate-y-1 transition-transform duration-75 cursor-pointer">
</div>
<!-- A# -->
<div
class="absolute top-0 left-[75%] w-[8%] sm:w-[7%] h-[62%] -translate-x-1/2 bg-gradient-to-b from-[#2a2c33] to-[#121318] rounded-b-md shadow-[inset_0_2px_1px_rgba(255,255,255,0.1),inset_1px_0_1px_rgba(255,255,255,0.05),inset_-1px_0_1px_rgba(0,0,0,0.5),0_12px_15px_-3px_rgba(0,0,0,0.9)] border-t border-[#4b5563] pointer-events-auto active:translate-y-1 transition-transform duration-75 cursor-pointer">
</div>
</div>
</div>
</div>
</div>
</div>