پیشنمایش زنده
کد HTML
<div class="flex justify-center items-center">
<label class="container">
<input
value="wedding-gift"
class="peer cursor-pointer hidden after:opacity-100"
checked="checked"
type="checkbox"
/>
<span
class="inline-block w-5 h-5 border-2 relative cursor-pointer after:content-[''] after:absolute after:top-2/4 after:left-2/4 after:-translate-x-1/2 after:-translate-y-1/2 after:w-[10px] after:h-[10px] after:bg-[#333] after:rounded-[2px] after:opacity-0 peer-checked:after:opacity-100"
></span>
</label>
</div>
کد CSS
.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.h-5{height:1.25rem}.w-5{width:1.25rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.border-2{border-width:2px}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:left-2\/4::after{content:var(--tw-content);left:50%}.after\:top-2\/4::after{content:var(--tw-content);top:50%}.after\:h-\[10px\]::after{content:var(--tw-content);height:10px}.after\:w-\[10px\]::after{content:var(--tw-content);width:10px}.after\:-translate-x-1\/2::after{content:var(--tw-content);--tw-translate-x:-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))}.after\:-translate-y-1\/2::after{content:var(--tw-content);--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))}.after\:rounded-\[2px\]::after{content:var(--tw-content);border-radius:2px}.after\:bg-\[\#333\]::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(51 51 51 / var(--tw-bg-opacity))}.after\:opacity-0::after{content:var(--tw-content);opacity:0}.after\:opacity-100::after{content:var(--tw-content);opacity:1}.after\:content-\[\'\'\]::after{--tw-content:'';content:var(--tw-content)}.peer:checked ~ .peer-checked\:after\:opacity-100::after{content:var(--tw-content);opacity:1}