1<label class="relative inline-flex items-center cursor-pointer">
2  <input type="checkbox" class="sr-only peer" />
3  <div class="relative w-[85px] h-[34px] bg-[#e5e7eb] peer-checked:bg-[#4ade80] rounded-[17px] transition-colors duration-[300ms]">
4    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-[12px] text-[#ffffff] font-medium">ON</span>
5    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-[12px] text-[#ffffff] font-medium peer-checked:opacity-0">OFF</span>
6    <div class="absolute top-[4px] left-[4px] w-[26px] h-[26px] bg-[#ffffff] rounded-full shadow transition-transform duration-[300ms] peer-checked:translate-x-[51px]"></div>
7  </div>
8</label>