Striped Table
Alternating row color table
Preview
| Name | Status | |
|---|---|---|
| John Doe | [email protected] | Active |
| Jane Smith | [email protected] | Active |
| Bob Johnson | [email protected] | Inactive |
{ window.Prism.highlightElement($refs.codeEl) }) }"
class="w-full flex items-center justify-between px-6 py-4 text-left bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
View Code
<div class="overflow-x-auto bg-white dark:bg-gray-900 rounded-lg shadow">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
<tr class="bg-white dark:bg-gray-900">
<td class="px-6 py-4 text-sm text-gray-900 dark:text-white">John Doe</td>
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">[email protected]</td>
<td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span></td>
</tr>
<tr class="bg-gray-50 dark:bg-gray-800">
<td class="px-6 py-4 text-sm text-gray-900 dark:text-white">Jane Smith</td>
<td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">[email protected]</td>
<td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Active</span></td>
</tr>
</tbody>
</table>
</div>