Switch by Uncannypotato69

1<label
2  class="cursor-pointer relative h-[3em] w-[6em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_4px_0px_rgb(18,18,18,0.25),0px_4px_8px_0px_rgb(18,18,18,0.35)]"
3>
4  <span
5    class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,25%)]"
6  ></span>
7  <div
8    class="absolute left-[0.5em] top-1/2 flex h-[2em] w-[2em] -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-[inset_0px_2px_2px_0px_hsl(0,0%,85%)]"
9  >
10    <div
11      class="h-[1.5em] w-[1.5em] rounded-full bg-[hsl(0,0%,7%)] shadow-[0px_2px_2px_0px_hsl(0,0%,85%)]"
12    ></div>
13  </div>
14  <div
15    class="absolute right-[0.5em] top-1/2 h-[0.25em] w-[1.5em] -translate-y-1/2 rounded-full bg-[hsl(0,0%,50%)] shadow-[inset_0px_2px_1px_0px_hsl(0,0%,40%)]"
16  ></div>
17  <input class="peer h-[1em] w-[1em] opacity-0" id="" name="" type="checkbox" />
18  <span
19    class="absolute left-[0.25em] top-1/2 flex h-[2.5em] w-[2.5em] -translate-y-1/2 items-center justify-center rounded-full bg-[rgb(26,26,26)] shadow-[inset_4px_4px_4px_0px_rgba(64,64,64,0.25),inset_-4px_-4px_4px_0px_rgba(16,16,16,0.5)] duration-300 peer-checked:left-[calc(100%-2.75em)]"
20  >
21    <span class="relative h-full w-full rounded-full">
22      <span
23        class="absolute inset-[0.1em] rounded-full border-[1px] border-[hsl(0,0%,50%)]"
24      ></span>
25    </span>
26  </span>
27</label>
28