Checkboxes | hoshikawamaki splendid fish 36

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<label for="tool_button" class="relative w-8 h-20 py-2">
  <input type="checkbox" id="tool_button" class="hidden peer" />
  <div
    class="flex items-center h-full bg-purple-400 rounded-lg w-72 -right-64 peer-checked:right-3 p-0.5 shadow-[0_2px_10px_rgba(0,0,0,0.24)] absolute transition-all duration-300 cursor-pointer"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="28"
      viewBox="0 0 24 24"
      fill="#fff"
      stroke="#fff"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="ml-0.5 feather feather-more-vertical"
    >
      <circle cx="12" cy="12" r="1"></circle>
      <circle cx="12" cy="5" r="1"></circle>
      <circle cx="12" cy="19" r="1"></circle>
    </svg>
    <div
      class="flex flex-row items-center justify-center w-full h-full bg-purple-300 border border-purple-400 rounded-lg"
    >