#f0f9ff
1<label class="relative inline-block cursor-pointer select-none">2 <input type="checkbox" class="peer sr-only" />3 <span class="block h-16 w-36 rounded-full bg-sky-100 shadow-[inset_0_2px_6px_rgb(12_74_110/.15),0_14px_28px_-14px_rgb(2_132_199/.6)] ring-4 ring-white transition-colors duration-700 peer-checked:bg-sky-200 peer-focus-visible:ring-sky-400"></span>4 <svg class="absolute right-5 top-5 size-6 text-sky-300 transition duration-500 peer-checked:rotate-90 peer-checked:scale-0 peer-checked:opacity-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 3.5l3 2.5 3-2.5M9 20.5l3-2.5 3 2.5"/></svg>5 <svg class="absolute left-5 top-6 h-4 w-10 -translate-x-2 text-sky-500 opacity-0 transition duration-500 peer-checked:translate-x-0 peer-checked:opacity-100 peer-checked:delay-300" viewBox="0 0 40 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M2 5c4-3 8 3 12 0s8 3 12 0 8 3 12 0M2 12c4-3 8 3 12 0s8 3 12 0 8 3 12 0"/></svg>6 <span class="absolute bottom-2.5 left-[5.75rem] h-2 w-10 scale-x-0 rounded-[50%] bg-sky-400/40 opacity-0 transition duration-500 peer-checked:scale-x-100 peer-checked:opacity-100 peer-checked:delay-500"></span>7 <span class="absolute left-3 top-3 size-10 rotate-6 rounded-lg border-2 border-sky-200 bg-white/90 shadow-[inset_-4px_-4px_0_rgb(186_230_253),0_6px_12px_-4px_rgb(14_165_233/.5)] transition-all duration-700 ease-[cubic-bezier(.34,1.56,.64,1)] before:absolute before:left-2 before:top-2 before:h-3 before:w-1.5 before:rounded-full before:bg-white before:content-[''] peer-checked:translate-x-20 peer-checked:-rotate-45 peer-checked:rounded-[50%_0_50%_50%] peer-checked:border-sky-500 peer-checked:bg-sky-500 peer-checked:shadow-[inset_-4px_-4px_0_rgb(3_105_161/.45),0_8px_16px_-6px_rgb(2_132_199)] peer-active:scale-90"></span>8</label>