Table Zebra

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