Checkbox by Uncannypotato69
#e8e8e8
HTML +TailwindCSS
1<label 2 class="relative flex cursor-pointer items-center justify-center gap-[1em]" 3 for="star" 4> 5 <input class="peer appearance-none" id="star" name="star" 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-[1px] border-black" 8 > 9 </span> 10 <svg 11 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]" 12 viewBox="0 0 38 37" 13 fill="none" 14 height="37" 15 width="38" 16 xmlns="http://www.w3.org/2000/svg" 17 > 18 <path 19 d="M6.617 36.785c-.676-5.093 4.49-10.776 6.318-14.952 1.887-4.31 4.315-10.701 6.055-15.506C20.343 2.59 20.456.693 20.57.789c3.262 2.744 1.697 10.518 2.106 14.675 1.926 19.575 4.62 12.875-7.635 4.43C12.194 17.933 2.911 12.1 1.351 8.82c-1.177-2.477 5.266 0 7.898 0 2.575 0 27.078-1.544 27.907-1.108.222.117-.312.422-.526.554-1.922 1.178-3.489 1.57-5.266 3.046-3.855 3.201-8.602 6.002-12.11 9.691-4.018 4.225-5.388 10.245-11.321 10.245" 20 stroke-width="1.5px" 21 pathLength="100" 22 stroke="#000" 23 ></path> 24 </svg> 25 <p class="text-[1em] font-semibold [user-select:none]">Make the project</p> 26</label> 27
325 views
325 views
Original Creator: Priyanshu Gupta
This UI element is reposted from an external origin. Show them some appreciation!
Variations
4 MIT License