Tailwind CSS Table Components

                            <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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr class="bg-white 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>
        <td class="py-4 px-4 text-sm text-gray-500">Blue</td>
      </tr>
      <!-- row 2 -->
      <tr class="bg-gray-50 border-b border-gray-200 hover:bg-gray-100">
        <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>
        <td class="py-4 px-4 text-sm text-gray-500">Purple</td>
      </tr>
      <!-- row 3 -->
      <tr class="bg-white border-b border-gray-200 hover:bg-gray-50">
        <th class="py-4 px-4 text-sm font-medium text-gray-900">3</th>
        <td class="py-4 px-4 text-sm text-gray-500">Brice Swyre</td>
        <td class="py-4 px-4 text-sm text-gray-500">Tax Accountant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Red</td>
      </tr>
      <!-- row 4 -->
      <tr class="bg-gray-50 border-b border-gray-200 hover:bg-gray-100">
        <th class="py-4 px-4 text-sm font-medium text-gray-900">4</th>
        <td class="py-4 px-4 text-sm text-gray-500">Marjy Ferencz</td>
        <td class="py-4 px-4 text-sm text-gray-500">Office Assistant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Green</td>
      </tr>
      <!-- row 5 -->
      <tr class="bg-white hover:bg-gray-50">
        <th class="py-4 px-4 text-sm font-medium text-gray-900">5</th>
        <td class="py-4 px-4 text-sm text-gray-500">Yancy Tear</td>
        <td class="py-4 px-4 text-sm text-gray-500">Community Outreach Specialist</td>
        <td class="py-4 px-4 text-sm text-gray-500">Yellow</td>
      </tr>
    </tbody>
  </table>
</div> 
                        

                            <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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</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>
        <td class="py-4 px-4 text-sm text-gray-500">Blue</td>
      </tr>
      <!-- row 2 -->
      <tr class="border-b border-gray-200 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>
        <td class="py-4 px-4 text-sm text-gray-500">Purple</td>
      </tr>
      <!-- row 3 -->
      <tr class="hover:bg-gray-50">
        <th class="py-4 px-4 text-sm font-medium text-gray-900">3</th>
        <td class="py-4 px-4 text-sm text-gray-500">Brice Swyre</td>
        <td class="py-4 px-4 text-sm text-gray-500">Tax Accountant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Red</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="bg-gray-50 border-t 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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</th>
      </tr>
    </tfoot>
  </table>
</div> 
                        

                            <!-- 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> 
                        

                            <div class="relative overflow-x-auto overflow-y-auto max-h-96 rounded-lg border border-gray-200 bg-white shadow-sm">
  <table class="w-full border-collapse bg-white">
    <!-- head with sticky header -->
    <thead class="sticky top-0 z-10">
      <tr class="bg-gray-50 border-b border-gray-200">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-gray-50 py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider z-20">#</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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Login</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</th>
      </tr>
    </thead>
    <tbody>
      <!-- row 1 -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">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>
        <td class="py-4 px-4 text-sm text-gray-500">Littel, Schaden and Vandervort</td>
        <td class="py-4 px-4 text-sm text-gray-500">Canada</td>
        <td class="py-4 px-4 text-sm text-gray-500">12/16/2020</td>
        <td class="py-4 px-4 text-sm text-gray-500">Blue</td>
      </tr>
      <!-- row 2 -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">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>
        <td class="py-4 px-4 text-sm text-gray-500">Zemlak, Daniel and Leannon</td>
        <td class="py-4 px-4 text-sm text-gray-500">United States</td>
        <td class="py-4 px-4 text-sm text-gray-500">12/5/2020</td>
        <td class="py-4 px-4 text-sm text-gray-500">Purple</td>
      </tr>
      <!-- row 3 -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">3</th>
        <td class="py-4 px-4 text-sm text-gray-500">Brice Swyre</td>
        <td class="py-4 px-4 text-sm text-gray-500">Tax Accountant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Carroll Group</td>
        <td class="py-4 px-4 text-sm text-gray-500">China</td>
        <td class="py-4 px-4 text-sm text-gray-500">8/15/2020</td>
        <td class="py-4 px-4 text-sm text-gray-500">Red</td>
      </tr>
      <!-- row 4 -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">4</th>
        <td class="py-4 px-4 text-sm text-gray-500">Marjy Ferencz</td>
        <td class="py-4 px-4 text-sm text-gray-500">Office Assistant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Rowe-Schoen</td>
        <td class="py-4 px-4 text-sm text-gray-500">Russia</td>
        <td class="py-4 px-4 text-sm text-gray-500">3/25/2021</td>
        <td class="py-4 px-4 text-sm text-gray-500">Green</td>
      </tr>
      <!-- row 5 -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">5</th>
        <td class="py-4 px-4 text-sm text-gray-500">Yancy Tear</td>
        <td class="py-4 px-4 text-sm text-gray-500">Community Outreach Specialist</td>
        <td class="py-4 px-4 text-sm text-gray-500">Wyman-Ledner</td>
        <td class="py-4 px-4 text-sm text-gray-500">Brazil</td>
        <td class="py-4 px-4 text-sm text-gray-500">5/22/2020</td>
        <td class="py-4 px-4 text-sm text-gray-500">Yellow</td>
      </tr>
      <!-- more rows for demonstration -->
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">6</th>
        <td class="py-4 px-4 text-sm text-gray-500">Irma Vasilik</td>
        <td class="py-4 px-4 text-sm text-gray-500">Editor</td>
        <td class="py-4 px-4 text-sm text-gray-500">Wiza, Bins and Emard</td>
        <td class="py-4 px-4 text-sm text-gray-500">Venezuela</td>
        <td class="py-4 px-4 text-sm text-gray-500">12/8/2020</td>
        <td class="py-4 px-4 text-sm text-gray-500">Purple</td>
      </tr>
      <tr class="border-b border-gray-200 hover:bg-gray-50">
        <!-- sticky first column -->
        <th class="sticky left-0 bg-white hover:bg-gray-50 py-4 px-4 text-sm font-medium text-gray-900 z-10">7</th>
        <td class="py-4 px-4 text-sm text-gray-500">Meghann Durtnal</td>
        <td class="py-4 px-4 text-sm text-gray-500">Staff Accountant IV</td>
        <td class="py-4 px-4 text-sm text-gray-500">Schuster-Schimmel</td>
        <td class="py-4 px-4 text-sm text-gray-500">Philippines</td>
        <td class="py-4 px-4 text-sm text-gray-500">2/17/2021</td>
        <td class="py-4 px-4 text-sm text-gray-500">Yellow</td>
      </tr>
    </tbody>
    <!-- sticky footer -->
    <tfoot class="sticky bottom-0 z-10">
      <tr class="bg-gray-50 border-t border-gray-200">
        <!-- sticky first column in footer -->
        <th class="sticky left-0 bg-gray-50 py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider z-20">#</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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Login</th>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</th>
      </tr>
    </tfoot>
  </table>
</div>

<p class="text-sm text-gray-500 mt-2">Scroll horizontally and vertically to see sticky header and first column</p> 
                        

                            <div class="overflow-x-auto">
  <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>
        <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Favorite Color</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>
        <td class="py-4 px-4 text-sm text-gray-500">Blue</td>
      </tr>
      <!-- row 2 -->
      <tr class="border-b border-gray-200 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>
        <td class="py-4 px-4 text-sm text-gray-500">Purple</td>
      </tr>
      <!-- row 3 -->
      <tr class="hover:bg-gray-50">
        <th class="py-4 px-4 text-sm font-medium text-gray-900">3</th>
        <td class="py-4 px-4 text-sm text-gray-500">Brice Swyre</td>
        <td class="py-4 px-4 text-sm text-gray-500">Tax Accountant</td>
        <td class="py-4 px-4 text-sm text-gray-500">Red</td>
      </tr>
    </tbody>
  </table>
</div>