<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<label class="inline-flex items-center relative">
<input class="peer hidden" id="toggle" type="checkbox" />
<div
class="relative w-[110px] h-[50px] bg-white peer-checked:bg-zinc-500 rounded-full after:absolute after:content-[''] after:w-[40px] after:h-[40px] after:bg-gradient-to-r from-orange-500 to-yellow-400 peer-checked:after:from-zinc-900 peer-checked:after:to-zinc-900 after:rounded-full after:top-[5px] after:left-[5px] active:after:w-[50px] peer-checked:after:left-[105px] peer-checked:after:translate-x-[-100%] shadow-sm duration-300 after:duration-300 after:shadow-md"
></div>
<svg
height="0"
width="100"
viewBox="0 0 24 24"
data-name="Layer 1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
class="fill-white peer-checked:opacity-60 absolute w-6 h-6 left-[13px]"
>
<path
d="M12,17c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5ZM13,0h-2V5h2V0Zm0,19h-2v5h2v-5ZM5,11H0v2H5v-2Zm19,0h-5v2h5v-2Zm-2.81-6.78l-1.41-1.41-3.54,3.54,1.41,1.41,3.54-3.54ZM7.76,17.66l-1.41-1.41-3.54,3.54,1.41,1.41,3.54-3.54Zm0-11.31l-3.54-3.54-1.41,1.41,3.54,3.54,1.41-1.41Zm13.44,13.44l-3.54-3.54-1.41,1.41,3.54,3.54,1.41-1.41Z"
></path>
</svg>
<svg
height="512"
width="512"
viewBox="0 0 24 24"
data-name="Layer 1"
id="Layer_1"