Table Sizes

                    <!-- XS Table -->
<div class="mb-8">
  <h3 class="text-lg font-medium text-gray-700 mb-2">Extra Small Table</h3>
  <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
    <table class="w-full border-collapse bg-white">
      <!-- head -->
      <thead>
        <tr class="bg-gray-50 border-b border-gray-200">
          <th class="py-2 px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
          <th class="py-2 px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="py-2 px-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-gray-200 hover:bg-gray-50">
          <th class="py-2 px-2 text-xs font-medium text-gray-900">1</th>
          <td class="py-2 px-2 text-xs text-gray-500">Cy Ganderton</td>
          <td class="py-2 px-2 text-xs text-gray-500">Quality Control Specialist</td>
        </tr>
        <!-- row 2 -->
        <tr class="hover:bg-gray-50">
          <th class="py-2 px-2 text-xs font-medium text-gray-900">2</th>
          <td class="py-2 px-2 text-xs text-gray-500">Hart Hagerty</td>
          <td class="py-2 px-2 text-xs text-gray-500">Desktop Support Technician</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Small Table -->
<div class="mb-8">
  <h3 class="text-lg font-medium text-gray-700 mb-2">Small Table</h3>
  <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
    <table class="w-full border-collapse bg-white">
      <!-- head -->
      <thead>
        <tr class="bg-gray-50 border-b border-gray-200">
          <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
          <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-gray-200 hover:bg-gray-50">
          <th class="py-3 px-3 text-xs font-medium text-gray-900">1</th>
          <td class="py-3 px-3 text-xs text-gray-500">Cy Ganderton</td>
          <td class="py-3 px-3 text-xs text-gray-500">Quality Control Specialist</td>
        </tr>
        <!-- row 2 -->
        <tr class="hover:bg-gray-50">
          <th class="py-3 px-3 text-xs font-medium text-gray-900">2</th>
          <td class="py-3 px-3 text-xs text-gray-500">Hart Hagerty</td>
          <td class="py-3 px-3 text-xs text-gray-500">Desktop Support Technician</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Medium Table (Default) -->
<div class="mb-8">
  <h3 class="text-lg font-medium text-gray-700 mb-2">Medium Table (Default)</h3>
  <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
    <table class="w-full border-collapse bg-white">
      <!-- head -->
      <thead>
        <tr class="bg-gray-50 border-b border-gray-200">
          <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
          <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Job</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-gray-200 hover:bg-gray-50">
          <th class="py-4 px-4 text-sm font-medium text-gray-900">1</th>
          <td class="py-4 px-4 text-sm text-gray-500">Cy Ganderton</td>
          <td class="py-4 px-4 text-sm text-gray-500">Quality Control Specialist</td>
        </tr>
        <!-- row 2 -->
        <tr class="hover:bg-gray-50">
          <th class="py-4 px-4 text-sm font-medium text-gray-900">2</th>
          <td class="py-4 px-4 text-sm text-gray-500">Hart Hagerty</td>
          <td class="py-4 px-4 text-sm text-gray-500">Desktop Support Technician</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Large Table -->
<div class="mb-8">
  <h3 class="text-lg font-medium text-gray-700 mb-2">Large Table</h3>
  <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
    <table class="w-full border-collapse bg-white">
      <!-- head -->
      <thead>
        <tr class="bg-gray-50 border-b border-gray-200">
          <th class="py-3 px-6 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">#</th>
          <th class="py-3 px-6 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="py-3 px-6 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">Job</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-gray-200 hover:bg-gray-50">
          <th class="py-4 px-6 text-base font-medium text-gray-900">1</th>
          <td class="py-4 px-6 text-base text-gray-500">Cy Ganderton</td>
          <td class="py-4 px-6 text-base text-gray-500">Quality Control Specialist</td>
        </tr>
        <!-- row 2 -->
        <tr class="hover:bg-gray-50">
          <th class="py-4 px-6 text-base font-medium text-gray-900">2</th>
          <td class="py-4 px-6 text-base text-gray-500">Hart Hagerty</td>
          <td class="py-4 px-6 text-base text-gray-500">Desktop Support Technician</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<!-- Extra Large Table -->
<div>
  <h3 class="text-lg font-medium text-gray-700 mb-2">Extra Large Table</h3>
  <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
    <table class="w-full border-collapse bg-white">
      <!-- head -->
      <thead>
        <tr class="bg-gray-50 border-b border-gray-200">
          <th class="py-4 px-8 text-left text-base font-medium text-gray-500 uppercase tracking-wider">#</th>
          <th class="py-4 px-8 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Name</th>
          <th class="py-4 px-8 text-left text-base font-medium text-gray-500 uppercase tracking-wider">Job</th>
        </tr>
      </thead>
      <tbody>
        <!-- row 1 -->
        <tr class="border-b border-gray-200 hover:bg-gray-50">
          <th class="py-5 px-8 text-lg font-medium text-gray-900">1</th>
          <td class="py-5 px-8 text-lg text-gray-500">Cy Ganderton</td>
          <td class="py-5 px-8 text-lg text-gray-500">Quality Control Specialist</td>
        </tr>
        <!-- row 2 -->
        <tr class="hover:bg-gray-50">
          <th class="py-5 px-8 text-lg font-medium text-gray-900">2</th>
          <td class="py-5 px-8 text-lg text-gray-500">Hart Hagerty</td>
          <td class="py-5 px-8 text-lg text-gray-500">Desktop Support Technician</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>