galaxy/Checkboxes/Javierrocadev_foolish-wasp-20.html

17 lines
No EOL
749 B
HTML

<!-- From Uiverse.io by Javierrocadev - Tags: simple, green, hover, checkbox, hover effect, tailwind -->
<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>