Basic example
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Larry
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Wild
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Variants
| 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 |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Class
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Heading
</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Default
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-blue-100 border-blue-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Primary
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-purple-100 border-purple-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Secondary
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-green-100 border-green-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Success
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-red-100 border-red-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Danger
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-yellow-100 border-yellow-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Warning
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-indigo-100 border-indigo-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Info
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-gray-50 border-gray-200">
<td class="text-sm text-gray-900 font-medium px-6 py-4 whitespace-nowrap">
Light
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="border-b bg-gray-800 boder-gray-900">
<td class="text-sm text-white font-medium px-6 py-4 whitespace-nowrap">
Dark
</td>
<td class="text-sm text-white font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-white font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Striped
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="bg-gray-100 border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-gray-100 border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Hoverable
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | Wild |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full">
<thead class="bg-white border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Larry
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Wild
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Bordered
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full border text-center">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 border-r">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 border-r">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 border-r">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Handle
</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 border-r">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap border-r">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap border-r">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 border-r">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap border-r">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap border-r">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 border-r">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center border-r">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Borderless
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center">
<thead>
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr>
<tr class="bg-white">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Small
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center">
<thead class="border-b bg-white">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-2">
Handle
</th>
</tr>
</thead class="border-b">
<tbody>
<tr class="bg-white border-b">
<td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
@mdo
</td>
</tr class="bg-white border-b">
<tr class="bg-white border-b">
<td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-2 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Light Head
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-4 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center">
<thead class="border-b bg-gray-50">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
First
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Last
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4">
Handle
</th>
</tr>
</thead class="border-b">
<tbody>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr class="bg-white border-b">
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Dark Head
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-4 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden">
<table class="min-w-full text-center">
<thead class="border-b bg-gray-800">
<tr>
<th scope="col" class="text-sm font-medium text-white px-6 py-4">
#
</th>
<th scope="col" class="text-sm font-medium text-white px-6 py-4">
First
</th>
<th scope="col" class="text-sm font-medium text-white px-6 py-4">
Last
</th>
<th scope="col" class="text-sm font-medium text-white px-6 py-4">
Handle
</th>
</tr>
</thead class="border-b">
<tbody>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Mark
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Otto
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@mdo
</td>
</tr class="bg-white border-b">
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Jacob
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Thornton
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@fat
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td colspan="2" class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap text-center">
Larry the Bird
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
@twitter
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Always responsive
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<div class="flex flex-col">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="border-b">
<tr>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
#
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
<th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
Heading
</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
<tr class="bg-white border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">3</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
Cell
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>