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 text-black-700 dark:bg-black-800 dark:text-black-100 text-p4">
        <th scope="row"
          class="p-8px w-32px"></th>
        <th scope="col"
          class="p-8px">
          Title
        </th>
        <th scope="col"
          class="p-8px">
          Title
        </th>
        <th scope="col"
          class="p-8px">
          Title
        </th>
        <th scope="row"
          class="p-8px w-[100px]">
          Title
        </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 ">
          <input class=""
            type="checkbox"
            name="table-checkbox-75" />
        </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="table-caption py-2px px-8px text-btn4 bg-black-200 dark:bg-black-700 rounded-full text-black-800 dark:text-black-100 font-medium whitespace-nowrap">
          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 ">
          <input class=""
            type="checkbox"
            name="table-checkbox-81" />
        </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="table-caption py-2px px-8px text-btn4 bg-black-200 dark:bg-black-700 rounded-full text-black-800 dark:text-black-100 font-medium whitespace-nowrap">
          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 ">
          <input class=""
            type="checkbox"
            name="table-checkbox-12" />
        </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="table-caption py-2px px-8px text-btn4 bg-black-200 dark:bg-black-700 rounded-full text-black-800 dark:text-black-100 font-medium whitespace-nowrap">
          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 ">
          <input class=""
            type="checkbox"
            name="table-checkbox-93" />
        </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="table-caption py-2px px-8px text-btn4 bg-black-200 dark:bg-black-700 rounded-full text-black-800 dark:text-black-100 font-medium whitespace-nowrap">
          Badge
        </div>
      </td>
      </tr>
    </tbody>
  </table>
</div>