Tab

<div class="flex flex-col gap-16px items-center">
  <button
    type="button"
    class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
  <button
    type="button"
    class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
</div>

<div class="flex flex-col gap-32px items-center">
  <!-- S size -->
  <div class="flex gap-12px border-b border-black-200 dark:border-black-600">
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
  <!-- M size -->
  <div class="flex gap-12px border-b border-black-200 dark:border-black-600">
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-8px px-12px border-b-[2px] border-transparent -mb-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
</div>

<div class="flex flex-col gap-16px items-center">
  <button
    type="button"
    class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
  <button
    type="button"
    class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
</div>

<div class="flex gap-32px items-center justify-center">
  <!-- S size -->
  <div class="flex flex-col gap-12px border-l border-black-200 dark:border-black-600">
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn2 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
  <!-- M size -->
  <div class="flex flex-col gap-12px border-l border-black-200 dark:border-black-600">
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px py-4px px-12px border-l-[2px] border-transparent -ml-[1px] disabled:opacity-40 data-[active=true]:border-black dark:data-[active=true]:border-white text-btn1 data-[active=true]:text-black dark:data-[active=true]:text-white text-black-700 hover:text-black dark:text-black-100 dark:hover:text-white [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
</div>

<div class="flex flex-col gap-16px items-center">
  <button
    type="button"
    class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
  <button
    type="button"
    class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px">
    Tab
  </button>
</div>

<div class="flex flex-col gap-32px items-center">
  <!-- S size -->
  <div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800">
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
  <!-- M size -->
  <div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800">
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
</div>

<div class="flex gap-32px items-center justify-center">
  <!-- S size -->
  <div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800 flex-col">
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-12px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn2 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
  <!-- M size -->
  <div class="flex gap-4px p-4px rounded-12px bg-black-50 dark:bg-black-800 flex-col">
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="true">
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      <svg
        width="16"
        height="16"
        viewbox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
          d="M13.3333 4L5.99996 11.3333L2.66663 8"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round">
        </path>
      </svg>
      Tab
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
      <div class="flex gap-8px items-center rounded-full py-2px px-8px text-btn3 text-center border cursor-default transition-all duration-300 [&.disabled]:opacity-40 whitespace-nowrap px-[6px]! py-0! cursor-pointer! text-background bg-black-700 border-black-700 hover:bg-black-800 hover:border-black-800 dark:bg-black-100 dark:border-black-100 dark:hover:bg-black-50 dark:hover:border-black-50">
        12
      </div>
    </button>
    <button
      type="button"
      class="flex items-center gap-4px rounded-8px transition-colors data-[active=true]:shadow-[0_0_4px_0_#0000001A] data-[active=true]:bg-white dark:data-[active=true]:shadow-[0_0_4px_0_#FFFFFF1A] dark:data-[active=true]:bg-black py-4px px-16px hover:shadow-[0_0_4px_0_#0000001A] hover:bg-white dark:hover:shadow-[0_0_4px_0_#FFFFFF1A] dark:hover:bg-black text-btn1 [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px"
      data-active="false">
      Tab
    </button>
  </div>
</div>