Table

<div class="mx-auto w-full border border-black-100 dark:border-black-700 rounded-8px overflow-auto w-[725px]">
  <table class="w-full">
    <thead>
      <tr class="text-left bg-black-50 dark:bg-black-800">
        <th
          class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-32px"
          scope="row">
          <svg
            width="14"
            height="14"
            viewbox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
        </th>
        <th
          class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
          scope="col">
          Title
          <svg
            width="14"
            height="14"
            viewbox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
        </th>
        <th
          class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
          scope="col">
          Title
          <svg
            width="14"
            height="14"
            viewbox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
        </th>
        <th
          class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100"
          scope="col">
          Title
          <svg
            width="14"
            height="14"
            viewbox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
        </th>
        <th
          class="p-8px text-black-700 dark:text-black-100 text-p4 [&_svg]:inline [&_svg]:ms-2px [&_svg]:transition-all [&_svg]:text-black-400 hover:[&_svg]:text-black-700 dark:hover:[&_svg]:text-black-100 w-[100px]"
          scope="col">
          Title
          <svg
            width="14"
            height="14"
            viewbox="0 0 14 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M4.08325 8.74967L6.99992 11.6663L9.91659 8.74967M4.08325 5.24967L6.99992 2.33301L9.91659 5.24967"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round">
            </path>
          </svg>
        </th>
      </tr>
    </thead>
    <tbody class="text-p3">
      <tr class="border-t border-black-100 dark:border-black-700">
        <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
            <input
              type="checkbox"
              name="table-checkbox-88"
              class="peer w-16px h-16px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
            </input>
            <svg
              width="10"
              height="8"
              viewbox="0 0 10 8"
              fill="none"
              class="absolute left-[3px] hidden fill-white peer-checked:flex">
              <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
              </path>
            </svg>
          </label>
        </th>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <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 table-caption bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500">
            Badge
          </div>
        </td>
      </tr>
      <tr class="border-t border-black-100 dark:border-black-700">
        <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
            <input
              type="checkbox"
              name="table-checkbox-47"
              class="peer w-16px h-16px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
            </input>
            <svg
              width="10"
              height="8"
              viewbox="0 0 10 8"
              fill="none"
              class="absolute left-[3px] hidden fill-white peer-checked:flex">
              <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
              </path>
            </svg>
          </label>
        </th>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Subtitle
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <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 table-caption bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500">
            Badge
          </div>
        </td>
      </tr>
      <tr class="border-t border-black-100 dark:border-black-700">
        <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
            <input
              type="checkbox"
              name="table-checkbox-75"
              class="peer w-16px h-16px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
            </input>
            <svg
              width="10"
              height="8"
              viewbox="0 0 10 8"
              fill="none"
              class="absolute left-[3px] hidden fill-white peer-checked:flex">
              <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
              </path>
            </svg>
          </label>
        </th>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Description
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <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 table-caption bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500">
            Badge
          </div>
        </td>
      </tr>
      <tr class="border-t border-black-100 dark:border-black-700">
        <th class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
            <input
              type="checkbox"
              name="table-checkbox-44"
              class="peer w-16px h-16px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
            </input>
            <svg
              width="10"
              height="8"
              viewbox="0 0 10 8"
              fill="none"
              class="absolute left-[3px] hidden fill-white peer-checked:flex">
              <path d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z">
              </path>
            </svg>
          </label>
        </th>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Header
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          Text
        </td>
        <td class="p-8px min-h-[40px] transition-all whitespace-nowrap table-cell hover:bg-black-50 dark:hover:bg-black-800">
          <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 table-caption bg-black-200 border-black-200 dark:bg-black-600 dark:border-black-600 text-black-800 dark:text-black-50 hover:bg-black-300 hover:border-black-300 dark:hover:bg-black-500 dark:hover:border-black-500">
            Badge
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>