<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"
    >
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-twitter"
        >
          <path
            d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
          ></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Twitter
        </p>
      </div>
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-twitch"
        >
          <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7"></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Twitch
        </p>
      </div>
      <div class="flex flex-col items-center justify-center flex-grow">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="#9370DB"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="feather feather-triangle"
        >
          <path
            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
          ></path>
        </svg>
        <p class="text-sm font-bold text-purple-800 uppercase text-nowrap">
          Go top
        </p>
      </div>
    </div>
  </div>
</label>