0
#18181b
1<label class="group flex cursor-pointer select-none items-center gap-4">2 <input type="checkbox" class="peer sr-only" />3 <span class="relative flex h-12 w-24 gap-1 rounded-lg border-2 border-zinc-600 p-1 transition duration-500 after:absolute after:-right-[7px] after:top-1/2 after:h-4 after:w-1 after:-translate-y-1/2 after:rounded-r after:bg-zinc-600 after:transition-colors after:duration-500 group-active:scale-95 group-has-[:checked]:border-lime-400 group-has-[:checked]:shadow-[0_0_26px_-4px_rgb(163_230_53/.7)] group-has-[:checked]:after:bg-lime-400 group-has-[:focus-visible]:ring-2 group-has-[:focus-visible]:ring-lime-300 group-has-[:focus-visible]:ring-offset-4 group-has-[:focus-visible]:ring-offset-zinc-900">4 <span class="flex-1 rounded bg-rose-500 transition-colors duration-300 group-has-[:checked]:bg-lime-400 motion-safe:group-has-[input:not(:checked)]:animate-pulse"></span>5 <span class="flex-1 origin-bottom scale-y-0 rounded bg-lime-400 transition-transform duration-300 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-y-100 group-has-[:checked]:delay-150"></span>6 <span class="flex-1 origin-bottom scale-y-0 rounded bg-lime-400 transition-transform duration-300 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-y-100 group-has-[:checked]:delay-300"></span>7 <span class="flex-1 origin-bottom scale-y-0 rounded bg-lime-400 transition-transform duration-300 ease-[cubic-bezier(.34,1.8,.64,1)] group-has-[:checked]:scale-y-100 group-has-[:checked]:delay-450"></span>8 <svg class="absolute inset-0 m-auto size-7 rotate-45 scale-0 text-zinc-900 drop-shadow-[0_0_2px_rgb(236_252_203)] transition duration-500 ease-[cubic-bezier(.34,1.9,.64,1)] group-has-[:checked]:rotate-0 group-has-[:checked]:scale-100 group-has-[:checked]:delay-[650ms]" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4.5 13.5h6.5L10 22l9-12h-6.5z"/></svg>9 </span>10 <span class="relative h-7 w-16 overflow-hidden font-mono text-lg font-bold">11 <span class="absolute inset-0 text-rose-400 transition duration-500 group-has-[:checked]:-translate-y-7 group-has-[:checked]:opacity-0">12%</span>12 <span class="absolute inset-0 translate-y-7 text-lime-400 opacity-0 transition duration-500 group-has-[:checked]:translate-y-0 group-has-[:checked]:opacity-100 group-has-[:checked]:delay-500">100%</span>13 </span>14</label>