<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<button class="cursor-pointer">
<label class="flex justify-center items-center">
<div class="w-fit p-1 m-2 rounded-md border shadow-2xl">
<div
class="relative rounded-full shadow-[0px_3px_10px_0px_rgba(156,156,156,0.75)_inset] hover:shadow-[0px_-3px_10px_0px_rgba(156,156,156,0.75)_inset] px-4 py-2 duration-700 flex justify-center items-center overflow-hidden"
>
<input type="checkbox" class="peer hidden" />
<span
class="absolute -top-5 left-[1.2rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[100ms]"
>S</span
>
<span
class="absolute -top-5 left-[1.7rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[200ms]"
>u</span
>
<span
class="absolute -top-5 left-[2.25rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[250ms]"
>b</span
>
<span
class="absolute -top-5 left-[2.8rem] peer-checked:duration-700 peer-checked:top-2 peer-checked:delay-[350ms]"
>m</span
>
<span