Checkbox by Uncannypotato69

1<label
2  for="checkbox"
3  class="relative h-[3em] w-[3em] rounded-[1.2em] bg-[#b3fffa] shadow-[inset_-1px_1px_4px_0px_#f0fffe,inset_1px_-1px_4px_0px_#00bdb0,-1px_2px_4px_0px_#00bdb0]"
4>
5  <input
6    type="checkbox"
7    name="checkbox"
8    id="checkbox"
9    class="peer appearance-none"
10  />
11  <span
12    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 rounded-[0.8em] bg-[#ccfffc] shadow-[inset_-1px_1px_4px_0px_#f0fffe,inset_1px_-1px_4px_0px_#00bdb0,-1px_1px_2px_0px_#00bdb0] duration-[200ms] peer-checked:shadow-[inset_1px_-1px_4px_0px_#f0fffe,inset_-1px_1px_4px_0px_#00bdb0]"
13  >
14  </span>
15  <svg
16    fill="#00756d"
17    viewBox="-3.2 -3.2 38.40 38.40"
18    xmlns="http://www.w3.org/2000/svg"
19    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 peer-checked:opacity-0"
20  >
21    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
22    <g
23      id="SVGRepo_tracerCarrier"
24      stroke-linecap="round"
25      stroke-linejoin="round"
26    ></g>
27    <g id="SVGRepo_iconCarrier">
28      <path
29        d="M5 16.577l2.194-2.195 5.486 5.484L24.804 7.743 27 9.937l-14.32 14.32z"
30      ></path>
31    </g>
32  </svg>
33  <svg
34    fill="#00756d"
35    viewBox="0 0 1024 1024"
36    xmlns="http://www.w3.org/2000/svg"
37    class="absolute left-1/2 top-1/2 h-[2em] w-[2em] -translate-x-1/2 -translate-y-1/2 opacity-0 peer-checked:opacity-100"
38  >
39    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
40    <g
41      id="SVGRepo_tracerCarrier"
42      stroke-linecap="round"
43      stroke-linejoin="round"
44    ></g>
45    <g id="SVGRepo_iconCarrier">
46      <path
47        d="M697.4 759.2l61.8-61.8L573.8 512l185.4-185.4-61.8-61.8L512 450.2 326.6 264.8l-61.8 61.8L450.2 512 264.8 697.4l61.8 61.8L512 573.8z"
48      ></path>
49    </g>
50  </svg>
51</label>
52