| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="min-w-full">
<thead class="bg-gray-100">
<tr>
<th class="px-6 py-3 font-medium text-left text-gray-600">#</th>
<th class="px-6 py-3 font-medium text-left text-gray-600">First</th>
<th class="px-6 py-3 font-medium text-left text-gray-600">Last</th>
<th class="px-6 py-3 font-medium text-left text-gray-600">Handle</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<th class="px-6 text-gray-500 py-2 text-justify">1</th>
<td class="px-6 text-gray-700 py-2">Mark</td>
<td class="px-6 text-gray-700 py-2">Otto</td>
<td class="px-6 text-gray-700 py-2">@mdo</td>
</tr>
<tr class="bg-gray-100">
<th class="px-6 text-gray-500 py-2 text-justify">2</th>
<td class="px-6 text-gray-600 py-2">Jacob</td>
<td class="px-6 text-gray-600 py-2">Thornton</td>
<td class="px-6 text-gray-600 py-2">@fat</td>
</tr>
<tr>
<th class="px-6 text-gray-500 py-2 text-justify">3</th>
<td colspan="2" class="px-6 text-gray-700 py-2">Larry the Bird</td>
<td class="px-6 text-gray-700 py-2">@twitter</td>
</tr>
<tr></tr>
</tbody>
</table>
Use the required class variant (e.g. table-primary, table-secondary) for color.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-100">
<tr>
<th class="px-6 py-3 font-medium text-left text-gray-600">
Class</th>
<th class="px-6 py-3 font-medium text-left text-gray-600">
Heading</th>
<th class="px-6 py-3 font-medium text-left text-gray-600">
Heading</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="hover:bg-gray-100">
<td class="px-6 py-2 font-semibold text-gray-500 text-justify">
Default</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-blue-100 hover:bg-blue-200">
<td class="font-semibold px-6 py-2 text-justify">Primary</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-gray-300 hover:bg-gray-400">
<td class="font-semibold px-6 py-2 text-justify">Secondary</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-green-100 hover:bg-green-200">
<td class="font-semibold px-6 py-2 text-justify">Success</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-red-100 hover:bg-red-200">
<td class="font-semibold px-6 py-2 text-justify">Danger</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-orange-100 hover:bg-orange-200">
<td class="font-semibold px-6 py-2 text-justify">Warning</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-cyan-100 hover:bg-cyan-200">
<td class="font-semibold px-6 py-2 text-justify">Info</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="bg-gray-200 hover:bg-gray-300">
<td class="font-semibold px-6 py-2 text-justify">Light</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
<tr class="text-white bg-gray-900 hover:bg-gray-800">
<td class="font-semibold px-6 py-2 text-justify">Dark</td>
<td class="px-6 py-2">Cell</td>
<td class="px-6 py-2">Cell</td>
</tr>
</tbody>
</table>