Basic table in tailwind css

<div class="w-full">
  <table class="w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
        <td class="px-6 py-4 whitespace-nowrap">Manager</td>
        <td class="px-6 py-4 whitespace-nowrap">john.doe@example.com</td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
        <td class="px-6 py-4 whitespace-nowrap">Sales Rep</td>
        <td class="px-6 py-4 whitespace-nowrap">jane.smith@example.com</td>
      </tr>
      <tr>
        <td class="px-6 py-4 whitespace-nowrap">Bob Johnson</td>
        <td class="px-6 py-4 whitespace-nowrap">Engineer</td>
        <td class="px-6 py-4 whitespace-nowrap">bob.johnson@example.com</td>
      </tr>
    </tbody>
  </table>
</div>