Checkbox by Uncannypotato69
#c4f3f3
HTML +TailwindCSS
1<label 2 class="relative text-[#008080] flex cursor-pointer items-center justify-center gap-[1em]" 3 for="tick" 4> 5 <input class="peer appearance-none" id="tick" name="tick" type="checkbox" /> 6 <span 7 class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 rounded-[0.25em] border-[2px] border-[#008080]" 8 > 9 </span> 10 <svg 11 viewBox="0 0 69 89" 12 class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 duration-500 ease-out [stroke-dasharray:100] [stroke-dashoffset:100] peer-checked:[stroke-dashoffset:0]" 13 fill="none" 14 height="89" 15 width="69" 16 xmlns="http://www.w3.org/2000/svg" 17 > 18 <path 19 d="M.93 63.984c3.436.556 7.168.347 10.147 2.45 4.521 3.19 10.198 8.458 13.647 12.596 1.374 1.65 4.181 5.922 5.598 8.048.267.4-1.31.823-1.4.35-5.744-30.636 9.258-59.906 29.743-81.18C62.29 2.486 63.104 1 68.113 1" 20 stroke-width="6px" 21 stroke="#008080" 22 pathLength="100" 23 ></path> 24 </svg> 25 26 <p class="text-[1em] font-bold [user-select:none]">Stare at Your Crush</p> 27</label> 28
96 views
Variation of acheckbox
MIT License