پیشنمایش زنده
کد HTML
<input
type="checkbox"
id="react-option"
value=""
class="hidden peer"
required=""
/>
<label
for="react-option"
class="flex z-10 items-center peer relative justify-center w-14 h-14 shadow-lg duration-300 [box-shadow:1px_1px_0px_1px_#eab92d] border-2 border-gray-800 peer-checked:border-2 peer-checked:border-gray-800 rounded-lg cursor-pointer text-neutral-50 peer-checked:[box-shadow:1px_1px_0px_1px_#075985] peer-checked:hover:[box-shadow:1px_1px_0px_1px_#1e1e1e] hover:[box-shadow:1px_1px_0px_1px_#1e1e1e]"
>
</label>
<svg
class="absolute stroke-sky-800 w-12 h-23 duration-300 peer-checked:opacity-100 opacity-0"
height="100"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 100"
width="100"
x="0"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
class="svg-stroke-primary"
d="M82.1,61.2a31.9,31.9,0,0,1-12.4,2.4A33.3,33.3,0,0,1,36.4,30.3a31.9,31.9,0,0,1,2.4-12.4A33.3,33.3,0,1,0,82.1,61.2Z"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="8"
></path>
</svg>
<svg
class="absolute stroke-yellow-500 w-12 h-23 duration-300 peer-checked:opacity-0 opacity-100"
height="100"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 100 100"
width="100"
x="0"
xmlns="http://www.w3.org/2000/svg"
y="0"
>
<path
class="svg-stroke-primary"
d="M50,18v3.6m0,56.8V82M82,50H78.4M21.6,50H18M72.6,72.6l-2.5-2.5M29.9,29.9l-2.5-2.5m45.2,0-2.5,2.5M29.9,70.1l-2.5,2.5M64.2,50A14.2,14.2,0,1,1,50,35.8,14.3,14.3,0,0,1,64.2,50Z"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="8"
></path>
</svg>
کد CSS
.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.hidden{display:none}.h-14{height:3.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-lg{border-radius:0.5rem}.border-2{border-width:2px}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.stroke-sky-800{stroke:#075985}.stroke-yellow-500{stroke:#eab308}.text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250 / var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.duration-300{transition-duration:300ms}.\[box-shadow\:1px_1px_0px_1px_\#eab92d\]{box-shadow:1px 1px 0px 1px #eab92d}.hover\:\[box-shadow\:1px_1px_0px_1px_\#1e1e1e\]:hover{box-shadow:1px 1px 0px 1px #1e1e1e}.peer:checked ~ .peer-checked\:border-2{border-width:2px}.peer:checked ~ .peer-checked\:border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.peer:checked ~ .peer-checked\:opacity-0{opacity:0}.peer:checked ~ .peer-checked\:opacity-100{opacity:1}.peer:checked ~ .peer-checked\:\[box-shadow\:1px_1px_0px_1px_\#075985\]{box-shadow:1px 1px 0px 1px #075985}.peer:checked ~ .peer-checked\:hover\:\[box-shadow\:1px_1px_0px_1px_\#1e1e1e\]:hover{box-shadow:1px 1px 0px 1px #1e1e1e}