Checkbox by Shubh0408
#1a1a1a
HTML +TailwindCSS
1<label 2 class="w-9 h-10 cursor-pointer flex flex-col items-center justify-center" 3> 4 <input class="hidden peer" type="checkbox" /> 5 <div 6 class="w-[50%] h-[2px] bg-white rounded-sm transition-all duration-300 origin-center rotate-90 -translate-x-[0.3rem] translate-y-[0.1rem] peer-checked:translate-y-[0.1rem]" 7 ></div> 8 <div 9 class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.05rem] peer-checked:rotate-[-30deg] peer-checked:translate-y-[0.22rem] peer-checked:translate-x-[0.15rem]" 10 ></div> 11 <div 12 class="w-[50%] h-[2px] bg-white rounded-md transition-all duration-300 origin-center rotate-90 translate-x-[0.3rem] -translate-y-[0.16rem] peer-checked:rotate-[30deg] peer-checked:translate-y-[-0.4rem] peer-checked:translate-x-[0.15rem]" 13 ></div> 14</label> 15
101 views
101 views
MIT License