پیشنمایش زنده
کد HTML
<label
for="spiral"
class="relative flex cursor-pointer items-center justify-center gap-[1em] text-[#EC5800]"
>
<input
type="checkbox"
name="spiral"
id="spiral"
class="peer appearance-none"
/>
<span
class="absolute left-0 top-1/2 h-[2em] w-[2em] -translate-x-full -translate-y-1/2 rounded-[0.25em] border-[2px] border-[#EC5800]"
>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="76"
height="86"
fill="none"
viewBox="0 0 76 86"
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]"
>
<path
stroke="#EC5800"
pathLength="100"
stroke-width="4px"
d="M65.988 12.645c-4.136-3.922-9.554-6.9-15.047-8.398C45.855 2.86 38.462-.12 33.096 1.797 26.002 4.331 20.525 11.961 15.6 17.193 2.02 31.623-6.386 59.79 12.101 74.58c8.711 6.97 18.19 9.184 29.043 9.798 24.117 1.365 28.693-3.588 32.542-27.643.772-4.83 3.15-16.094.7-20.995-4.678-9.354-22.35-11.08-31.143-7.698-9.911 3.812-18.558 14.775-20.295 25.193-1.45 8.707 5.447 10.548 12.947 10.848 6.772.27 10.148 1.421 10.148-5.949 0-5.412.09-7.166-2.1-11.547"
></path>
</svg>
<p class="text-[1em] font-semibold [user-select:none]">Eat Potatoes</p>
</label>
کد CSS
.absolute{position:absolute}.relative{position:relative}.left-0{left:0px}.top-1\/2{top:50%}.flex{display:flex}.h-\[2em\]{height:2em}.w-\[2em\]{width:2em}.-translate-x-full{--tw-translate-x:-100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\[1em\]{gap:1em}.rounded-\[0\.25em\]{border-radius:0.25em}.border-\[2px\]{border-width:2px}.border-\[\#EC5800\]{--tw-border-opacity:1;border-color:rgb(236 88 0 / var(--tw-border-opacity))}.text-\[1em\]{font-size:1em}.font-semibold{font-weight:600}.text-\[\#EC5800\]{--tw-text-opacity:1;color:rgb(236 88 0 / var(--tw-text-opacity))}.duration-500{transition-duration:500ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.\[stroke-dasharray\:100\]{stroke-dasharray:100}.\[stroke-dashoffset\:100\]{stroke-dashoffset:100}.\[user-select\:none\]{-webkit-user-select:none;user-select:none}.peer:checked ~ .peer-checked\:\[stroke-dashoffset\:0\]{stroke-dashoffset:0}