Tailwind Table

Table Component with Title

<div class="flex justify-center">
  <table class="w-full max-w-4xl border-collapse rounded-lg overflow-hidden shadow-lg">
    <thead class="bg-gray-100 dark:bg-gray-800">
      <tr>
        <th class="px-6 py-4 text-left font-medium text-gray-900 dark:text-gray-50">Name</th>
        <th class="px-6 py-4 text-left font-medium text-gray-900 dark:text-gray-50">Email</th>
        <th class="px-6 py-4 text-left font-medium text-gray-900 dark:text-gray-50">Role</th>
        <th class="px-6 py-4 text-right font-medium text-gray-900 dark:text-gray-50">Actions</th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-950">
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
        <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
        <td class="px-6 py-4 whitespace-nowrap">Admin</td>
        <td class="px-6 py-4 text-right">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
            type="button"
            id="radix-:r0:"
            aria-haspopup="menu"
            aria-expanded="false"
            data-state="closed"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4"
            >
              <polyline points="18 8 22 12 18 16"></polyline>
              <polyline points="6 8 2 12 6 16"></polyline>
              <line x1="2" x2="22" y1="12" y2="12"></line>
            </svg>
            <span class="sr-only">Actions</span>
          </button>
        </td>
      </tr>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <td class="px-6 py-4 whitespace-nowrap">Jane Smith</td>
        <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
        <td class="px-6 py-4 whitespace-nowrap">Editor</td>
        <td class="px-6 py-4 text-right">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
            type="button"
            id="radix-:r2:"
            aria-haspopup="menu"
            aria-expanded="false"
            data-state="closed"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4"
            >
              <polyline points="18 8 22 12 18 16"></polyline>
              <polyline points="6 8 2 12 6 16"></polyline>
              <line x1="2" x2="22" y1="12" y2="12"></line>
            </svg>
            <span class="sr-only">Actions</span>
          </button>
        </td>
      </tr>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <td class="px-6 py-4 whitespace-nowrap">Bob Johnson</td>
        <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
        <td class="px-6 py-4 whitespace-nowrap">User</td>
        <td class="px-6 py-4 text-right">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
            type="button"
            id="radix-:r4:"
            aria-haspopup="menu"
            aria-expanded="false"
            data-state="closed"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4"
            >
              <polyline points="18 8 22 12 18 16"></polyline>
              <polyline points="6 8 2 12 6 16"></polyline>
              <line x1="2" x2="22" y1="12" y2="12"></line>
            </svg>
            <span class="sr-only">Actions</span>
          </button>
        </td>
      </tr>
      <tr class="border-b border-gray-200 dark:border-gray-800">
        <td class="px-6 py-4 whitespace-nowrap">Alice Williams</td>
        <td class="px-6 py-4 whitespace-nowrap">[email protected]</td>
        <td class="px-6 py-4 whitespace-nowrap">Viewer</td>
        <td class="px-6 py-4 text-right">
          <button
            class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
            type="button"
            id="radix-:r6:"
            aria-haspopup="menu"
            aria-expanded="false"
            data-state="closed"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="w-4 h-4"
            >
              <polyline points="18 8 22 12 18 16"></polyline>
              <polyline points="6 8 2 12 6 16"></polyline>
              <line x1="2" x2="22" y1="12" y2="12"></line>
            </svg>
            <span class="sr-only">Actions</span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>