Tailwind table
Tailwind Table: Basic Example
Important point here is we have used whitespace-no-wrap to make text inline. Table is wraped two div tags, to make proper overflow with padding around it. Padding right is ignored in most modern browser, so padding is added in wrapper div tags rather than in a table tags.
| # | Name | Avatar | Status | Action | |
|---|---|---|---|---|---|
| 1 | Bedram Tamang |
|
[email protected] | Active | |
| 2 | Taylor Otwel |
|
[email protected] | Pending | |
| 3 | Adam wathan |
|
[email protected] | Not Active |
<div class="bg-white rounded-lg shadow-lg py-6">
<div class="block overflow-x-auto mx-6">
<table class="w-full text-left rounded-lg">
<thead>
<tr class="text-gray-800 border border-b-0">
<th class="px-4 py-3">#</th>
<th class="px-4 py-3">Name</th>
<th class="px-4 py-3">Avatar</th>
<th class="px-4 py-3">Email</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Action</th>
</tr>
</thead>
<tbody>
<tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border border-b-0">
<td class="px-4 py-4">1</td>
<td class="px-4 py-4">Bedram Tamang</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-green-500 text-white rounded-full px-2 py-1">Active</span>
</td>
<td class="text-center py-4">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
<tr class="w-full font-light text-gray-700 whitespace-no-wrap border">
<td class="px-4 py-4">2</td>
<td class="px-4 py-4">Taylor Otwel</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-yellow-500 text-white rounded-full px-2 py-1">Pending</span>
</td>
<td class="text-center py-4">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
<tr class="w-full font-light text-gray-700 bg-gray-100 whitespace-no-wrap border">
<td class="px-4 py-4">3</td>
<td class="px-4 py-4">Adam wathan</td>
<td class="px-4 py-4">
<img class="h-6 w-6 rounded-full"
src="/assets/docs/master/image-01.jpg">
</td>
<td class="px-4 py-4">[email protected]</td>
<td class="px-4 py-4">
<span class="text-sm bg-red-500 text-white rounded-full px-2 py-1">Not Active</span>
</td>
<td class="text-center py-4">
<a href="#"><span class="fill-current text-green-500 material-icons">edit</span></a>
<a href="#"><span class="fill-current text-red-500 material-icons">highlight_off</span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Tailwind Dark black Header table.
bg-gray-800 class is used in tr tag to make background dark with text color text-gray-300 for dark header tailwind table.
| # | Name | Avatar | Status | Action | |
|---|---|---|---|---|---|
| 1 | Bedram Tamang |
|
[email protected] | Active | |
| 2 | Taylor Otwel |
|
[email protected] | Pending | |
| 3 | Adam wathan |
|
[email protected] | Not Active |
Tailwind Dark Table
Completely dark table is acheived using background class bg-gray-700 and bg-gray-600 in alternating fashion.
| # | Name | Avatar | Status | Action | |
|---|---|---|---|---|---|
| 1 | Bedram Tamang |
|
[email protected] | Active | |
| 2 | Taylor Otwel |
|
[email protected] | Pending | |
| 3 | Adam wathan |
|
[email protected] | Not Active |