#0f172a
1<label class="group relative block cursor-pointer select-none">2 <input type="checkbox" class="sr-only" />3 <span class="relative block h-16 w-36 overflow-hidden rounded-full bg-gradient-to-r from-sky-300 via-cyan-200 to-blue-400 shadow-[0_14px_32px_-12px_rgba(56,189,248,.8),inset_0_2px_4px_rgba(255,255,255,.6)] transition-shadow duration-500 group-has-[:checked]:shadow-[0_14px_32px_-12px_rgba(249,115,22,.9),inset_0_2px_4px_rgba(255,255,255,.4)]">4 <span class="absolute inset-0 bg-gradient-to-r from-amber-300 via-orange-500 to-rose-600 opacity-0 transition-opacity duration-500 group-has-[:checked]:opacity-100"></span>5 <span class="absolute right-6 top-[18px] text-lg font-black leading-7 text-white drop-shadow transition duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:translate-y-8 group-has-[:checked]:opacity-0">-4°</span>6 <span class="absolute left-6 top-[18px] -translate-y-8 text-lg font-black leading-7 text-white opacity-0 drop-shadow transition duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:translate-y-0 group-has-[:checked]:opacity-100">38°</span>7 </span>8 <span class="absolute left-2 top-2 grid size-12 place-items-center rounded-full bg-white shadow-[0_6px_16px_-4px_rgba(0,0,0,.35)] transition-transform duration-[650ms] ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:translate-x-[80px] group-has-[:checked]:rotate-[360deg]">9 <svg viewBox="0 0 24 24" class="absolute size-7 fill-none stroke-sky-500 transition-all duration-500 group-has-[:checked]:rotate-90 group-has-[:checked]:scale-0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M3.3 7l17.4 10M3.3 17 20.7 7M9 4l3 2 3-2M9 20l3-2 3 2M4 10.5l2.8-.2L5.6 7.8M20 13.5l-2.8.2 1.2 2.5M4 13.5l2.8.2-1.2 2.5M20 10.5l-2.8-.2 1.2-2.5"/></svg>10 <svg viewBox="0 0 24 24" class="absolute size-7 -rotate-90 scale-0 fill-orange-500 transition-all duration-500 group-has-[:checked]:rotate-0 group-has-[:checked]:scale-100"><path d="M12 2c1 4 5.5 6 5.5 11.5a5.5 5.5 0 0 1-11 0c0-2.3 1-3.9 2.2-5 .3 2.2 1.6 3.3 2.8 3.3-1.1-3.3 0-7 .5-9.8z"/><path d="M12 13.5c.4 1.6 2.2 2.3 2.2 4.3a2.2 2.2 0 0 1-4.4 0c0-1.3.9-2.1 1.5-2.6.1-.7.4-1.2.7-1.7z" fill="#fde68a"/></svg>11 </span>12</label>