Switch by SHShubh0408
#e8e8e8
HTML +TailwindCSS
1<label 2 class="switch cursor-pointer relative flex w-[6.7rem] scale-75 overflow-hidden p-2" 3> 4 <input type="checkbox" name="" class="peer hidden" /> 5 <div 6 class="absolute -right-[6.5rem] z-[1] flex h-12 w-24 skew-x-12 items-center justify-center text-lg duration-500 peer-checked:right-1" 7 > 8 <span class="-skew-x-12">ON</span> 9 </div> 10 <div 11 class="z-0 h-12 w-24 -skew-x-12 border border-black duration-500 peer-checked:skew-x-12 peer-checked:bg-green-500" 12 ></div> 13 <div 14 class="absolute left-[0.3rem] flex h-12 w-24 -skew-x-12 items-center justify-center text-lg duration-500 peer-checked:-left-[6.5rem]" 15 > 16 <span class="skew-x-12">OFF</span> 17 </div> 18</label> 19
282 views
MIT License