پیشنمایش زنده
کد HTML
<input
type="checkbox"
id="react-option"
value=""
class="hidden peer"
required=""
/>
<label
for="react-option"
class="flex items-center justify-center w-10 h-10 [box-shadow:1px_1px_0px_2px_#1e1e1e] duration-300 hover:[box-shadow:1px_1px_0px_1px_#000] hover:translate-y-0.5 hover:translate-x-0.5 bg-neutral-700 border-2 border-gray-800 rounded-full cursor-pointer text-neutral-50 peer-checked:[box-shadow:1px_1px_0px_2px_#28AB6B] peer-checked:border-none peer-checked:hover:[box-shadow:1px_1px_0px_1px_#28AB6B] peer-checked:bg-neutral-50 peer-checked:text-gray-800"
>
<span class="text-lg font-semibold">5</span>
</label>
کد CSS
.flex {
display: flex;
}
.hidden {
display: none;
}
.h-10 {
height: 2.5rem;
}
.w-10 {
width: 2.5rem;
}
.cursor-pointer {
cursor: pointer;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.rounded-full {
border-radius: 9999px;
}
.border-2 {
border-width: 2px;
}
.border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity));
}
.bg-neutral-700 {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.font-semibold {
font-weight: 600;
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity));
}
.duration-300 {
transition-duration: 300ms;
}
.\[box-shadow\:1px_1px_0px_2px_\#1e1e1e\] {
box-shadow: 1px 1px 0px 2px #1e1e1e;
}
.hover\:translate-x-0:hover {
--tw-translate-x: 0px;
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));
}
.hover\:translate-x-0\.5:hover {
--tw-translate-x: 0.125rem;
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));
}
.hover\:translate-y-0:hover {
--tw-translate-y: 0px;
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));
}
.hover\:translate-y-0\.5:hover {
--tw-translate-y: 0.125rem;
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));
}
.hover\:\[box-shadow\:1px_1px_0px_1px_\#000\]:hover {
box-shadow: 1px 1px 0px 1px #000;
}
.peer:checked ~ .peer-checked\:border-none {
border-style: none;
}
.peer:checked ~ .peer-checked\:bg-neutral-50 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
.peer:checked ~ .peer-checked\:text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.peer:checked ~ .peer-checked\:\[box-shadow\:1px_1px_0px_2px_\#28AB6B\] {
box-shadow: 1px 1px 0px 2px #28ab6b;
}
.peer:checked
~ .peer-checked\:hover\:\[box-shadow\:1px_1px_0px_1px_\#28AB6B\]:hover {
box-shadow: 1px 1px 0px 1px #28ab6b;
}