<label for="toggle" class="[--width:3.5rem] [--padding:0.15rem] p-[var(--padding)] bg-transparent flex relative w-[var(--width)] aspect-video cursor-pointer rounded-full">
  <input type="checkbox" id="toggle" class="peer appearance-none invisible absolute" />
  <span
    class="h-[100%] scale-[0.9] peer-checked:translate-x-[calc(var(--width)-((var(--padding)*2)+100%))] peer-checked:bg-blue-500 ease-out aspect-square my-auto rounded-full bg-zinc-400 duration-300 transition-[transform,background-color,border-color]"></span>
  <div
    class="absolute w-full h-full border-2 dark:border-zinc-700 border-zinc-300 peer-checked:dark:border-blue-600 peer-checked:border-blue-500 rounded-full inset-0"></div>
</label>

<label for="toggle" class="[--width:3.5rem] [--padding:0.15rem] [--text-size:0.6em] p-[var(--padding)] bg-transparent flex relative w-[var(--width)] aspect-video cursor-pointer rounded-full">
  <input type="checkbox" id="toggle" class="peer appearance-none" />
  <span
    class="before:[font-size:var(--text-size)] h-[100%] scale-[0.9] relative peer-checked:translate-x-[calc(var(--width)-((var(--padding)*2)+100%))] peer-checked:bg-emerald-600 ease-out aspect-square my-auto rounded-full bg-red-500/80 duration-300 transition-[transform,background-color,border-color] before:content-['OFF'] peer-checked:before:content-['ON'] before:font-bold before:font-sans before:absolute before:flex before:items-center before:justify-center before:inset-0 before:text-white"></span>
  <div
    class="absolute w-full h-full border-2 border-red-500/80 peer-checked:dark:border-emerald-600 peer-checked:border-emerald-600 rounded-full inset-0"></div>
</label>

<label for="toggle" class="[--width:3.5rem] [--padding:0.15rem] [--text-size:0.6em] p-[var(--padding)] bg-transparent flex relative w-[var(--width)] aspect-[2/1] cursor-pointer rounded-full">
  <input type="checkbox" id="toggle" class="peer appearance-none" />
  <span class="before:[font-size:var(--text-size)] h-[100%] scale-[0.85] relative peer-checked:translate-x-[calc(var(--width)-((var(--padding)*2)+100%))] ease-out aspect-square my-auto rounded-full duration-300 transition-[transform,background-color,border-color]  before:transition-transform before:-z-10 before:font-bold before:font-sans before:absolute before:flex before:items-center before:justify-center before:inset-0 before:content-['OFF']
    peer-checked:bg-emerald-600 peer-checked:before:-translate-x-[130%] before:translate-x-[130%]
    dark:bg-zinc-300/80 bg-zinc-500
    peer-checked:before:text-emerald-600 before:dark:text-zinc-300 before:text-zinc-500 peer-checked:before:content-['ON'] "></span>
  <div class="absolute w-full h-full border-2 rounded-full inset-0 sdark:border-zinc-300/80 border-zinc-500 peer-checked:dark:border-emerald-600 peer-checked:border-emerald-600 "></div>
</label>