Tailwind CSS Table
Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells
The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.
Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Tailwind.
Default table #
Use the following example of a responsive table component to show multiple rows and columns of text data.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
| Product name | Color | Category | Price |
|---|---|---|---|
| Apple MacBook Pro 17" | Sliver | Laptop | $2999 |
| Microsoft Surface Pro | White | Laptop PC | $1999 |
| Magic Mouse 2 | Black | Accessories | $99 |
<div class="overflow-x-auto relative">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
</tr>
</tbody>
</table>
</div>Highlight #
Accentuate certain elements inside the table such as the rows, columns or data cells based on your needs.
Striped rows #
Use this example to increase the readability of the data sets by alternating the background color of every second table row.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-gray-50 border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-gray-50 border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Striped columns #
Use this example to increase the readability of the table cells by alternating the background color of every second table column.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
| Product name | Color | Category | Price |
|---|---|---|---|
| Apple MacBook Pro 17" | Sliver | Laptop | $2999 |
| Microsoft Surface Pro | White | Laptop PC | $1999 |
| Magic Mouse 2 | Black | Accessories | $99 |
| Google Pixel Phone | Gray | Phone | $799 |
| Apple Watch 5 | Red | Wearables | $999 |
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6 bg-gray-50 dark:bg-gray-800">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6 bg-gray-50 dark:bg-gray-800">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6 bg-gray-50 dark:bg-gray-800">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6 bg-gray-50 dark:bg-gray-800">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6 bg-gray-50 dark:bg-gray-800">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6 bg-gray-50 dark:bg-gray-800">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
</tr>
<tr>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap bg-gray-50 dark:text-white dark:bg-gray-800">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6 bg-gray-50 dark:bg-gray-800">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
</tr>
</tbody>
</table>
</div>Hover state #
Use the hover:{bg-*} utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table layout #
Use the following examples of table layouts to show the head, foot or caption of the table.
Table head (sortable) #
This example can be used to show the head of the table component with sortable icons.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
<div class="flex items-center">
Color
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-3 h-3" aria-hidden="true" fill="currentColor" viewBox="0 0 320 512"><path d="M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"/></svg></a>
</div>
</th>
<th scope="col" class="py-3 px-6">
<div class="flex items-center">
Category
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-3 h-3" aria-hidden="true" fill="currentColor" viewBox="0 0 320 512"><path d="M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"/></svg></a>
</div>
</th>
<th scope="col" class="py-3 px-6">
<div class="flex items-center">
Price
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-3 h-3" aria-hidden="true" fill="currentColor" viewBox="0 0 320 512"><path d="M27.66 224h264.7c24.6 0 36.89-29.78 19.54-47.12l-132.3-136.8c-5.406-5.406-12.47-8.107-19.53-8.107c-7.055 0-14.09 2.701-19.45 8.107L8.119 176.9C-9.229 194.2 3.055 224 27.66 224zM292.3 288H27.66c-24.6 0-36.89 29.77-19.54 47.12l132.5 136.8C145.9 477.3 152.1 480 160 480c7.053 0 14.12-2.703 19.53-8.109l132.3-136.8C329.2 317.8 316.9 288 292.3 288z"/></svg></a>
</div>
</th>
<th scope="col" class="py-3 px-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table foot #
Use this example where the <tfoot> HTML element can be used in conjunction with the head and caption of the table component.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
| Product name | Qty | Price |
|---|---|---|
| Apple MacBook Pro 17" | 1 | $2999 |
| Microsoft Surface Pro | 1 | $1999 |
| Magic Mouse 2 | 1 | $99 |
| Total | 3 | 21,000 |
<div class="overflow-x-auto relative">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6 rounded-l-lg">
Product name
</th>
<th scope="col" class="py-3 px-6">
Qty
</th>
<th scope="col" class="py-3 px-6 rounded-r-lg">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
1
</td>
<td class="py-4 px-6">
$2999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
1
</td>
<td class="py-4 px-6">
$1999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
1
</td>
<td class="py-4 px-6">
$99
</td>
</tr>
</tbody>
<tfoot>
<tr class="font-semibold text-gray-900 dark:text-white">
<th scope="row" class="py-3 px-6 text-base">Total</th>
<td class="py-3 px-6">3</td>
<td class="py-3 px-6">21,000</td>
</tr>
</tfoot>
</table>
</div>Table caption #
Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
| Product name | Color | Category | Price | Edit |
|---|---|---|---|---|
| Apple MacBook Pro 17" | Sliver | Laptop | $2999 | Edit |
| Microsoft Surface Pro | White | Laptop PC | $1999 | Edit |
| Magic Mouse 2 | Black | Accessories | $99 | Edit |
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<caption class="p-5 text-lg font-semibold text-left text-gray-900 bg-white dark:text-white dark:bg-gray-800">
Our products
<p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">Browse a list of Tailwind products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.</p>
</caption>
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
<span class="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6 text-right">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table styles #
Get started with the following table styles and choose the one that best fits your application.
Without border #
Use this example of a table component without any border between the table cells.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
| Product name | Color | Category | Price |
|---|---|---|---|
| Apple MacBook Pro 17" | Sliver | Laptop | $2999 |
| Microsoft Surface Pro | White | Laptop PC | $1999 |
| Magic Mouse 2 | Black | Accessories | $99 |
<div class="overflow-x-auto relative">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-900 uppercase dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
</tr>
</tbody>
</table>
</div>Table with shadow #
Use this example to apply a shadow border to the table component.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800">
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Overflow scrolling #
Use this example where we apply overflow-x-auto to enable horizontal scrolling if the content inside the table overflows that maximum width.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
|
|
Product name | Color | Category | Accesories | Available | Price | Weight | Action |
|---|---|---|---|---|---|---|---|---|
|
|
Apple MacBook Pro 17" | Sliver | Laptop | Yes | Yes | $2999 | 3.0 lb. | Edit Remove |
|
|
Microsoft Surface Pro | White | Laptop PC | No | Yes | $1999 | 1.0 lb. | Edit Remove |
|
|
Magic Mouse 2 | Black | Accessories | Yes | No | $99 | 0.2 lb. | Edit Remove |
|
|
Apple Watch | Black | Watches | Yes | No | $199 | 0.12 lb. | Edit Remove |
|
|
Apple iMac | Silver | PC | Yes | Yes | $2999 | 7.0 lb. | Edit Remove |
|
|
Apple AirPods | White | Accessories | No | Yes | $399 | 38 g | Edit Remove |
|
|
iPad Pro | Gold | Tablet | No | Yes | $699 | 1.3 lb. | Edit Remove |
|
|
Magic Keyboard | Black | Accessories | Yes | Yes | $99 | 453 g | Edit Remove |
|
|
Apple TV 4K | Black | TV | Yes | No | $179 | 1.78 lb. | Edit Remove |
|
|
AirTag | Silver | Accessories | Yes | No | $29 | 53 g | Edit Remove |
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Accesories
</th>
<th scope="col" class="py-3 px-6">
Available
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Weight
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
3.0 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
1.0 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
0.2 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Watches
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
$199
</td>
<td class="py-4 px-6">
0.12 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple iMac
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
PC
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
7.0 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple AirPods
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$399
</td>
<td class="py-4 px-6">
38 g
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
iPad Pro
</th>
<td class="py-4 px-6">
Gold
</td>
<td class="py-4 px-6">
Tablet
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$699
</td>
<td class="py-4 px-6">
1.3 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Keyboard
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
453 g
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple TV 4K
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
TV
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
$179
</td>
<td class="py-4 px-6">
1.78 lb.
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
AirTag
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
Yes
</td>
<td class="py-4 px-6">
No
</td>
<td class="py-4 px-6">
$29
</td>
<td class="py-4 px-6">
53 g
</td>
<td class="flex items-center py-4 px-6 space-x-3">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
</tbody>
</table>
</div>Table search #
Use this example to show a search bar that can be used to query through data inside the table component.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<div class="pb-4 bg-white dark:bg-gray-900">
<label for="table-search" class="sr-only">Search</label>
<div class="relative mt-1">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="table-search" class="block p-2 pl-10 w-80 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items">
</div>
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$179
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
iPad
</th>
<td class="py-4 px-6">
Gold
</td>
<td class="py-4 px-6">
Tablet
</td>
<td class="py-4 px-6">
$699
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple iMac 27"
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
PC Desktop
</td>
<td class="py-4 px-6">
$3999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table filter #
Use this example with a filter bar to select certain data sets inside the table based on the options that you’ve selected.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<div class="flex justify-between items-center pb-4">
<div>
<button id="dropdownRadioButton" data-dropdown-toggle="dropdownRadio" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<svg class="mr-2 w-4 h-4 text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
Last 30 days
<svg class="ml-2 w-3 h-3" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdownRadio" class="hidden z-10 w-48 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(522.5px, 3847.5px, 0px);">
<ul class="p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownRadioButton">
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="filter-radio-example-1" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="filter-radio-example-1" class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last day</label>
</div>
</li>
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input checked="" id="filter-radio-example-2" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="filter-radio-example-2" class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 7 days</label>
</div>
</li>
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="filter-radio-example-3" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="filter-radio-example-3" class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last 30 days</label>
</div>
</li>
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="filter-radio-example-4" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="filter-radio-example-4" class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last month</label>
</div>
</li>
<li>
<div class="flex items-center p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
<input id="filter-radio-example-5" type="radio" value="" name="filter-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="filter-radio-example-5" class="ml-2 w-full text-sm font-medium text-gray-900 rounded dark:text-gray-300">Last year</label>
</div>
</li>
</ul>
</div>
</div>
<label for="table-search" class="sr-only">Search</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="table-search" class="block p-2 pl-10 w-80 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for items">
</div>
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$179
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
iPad
</th>
<td class="py-4 px-6">
Gold
</td>
<td class="py-4 px-6">
Tablet
</td>
<td class="py-4 px-6">
$699
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple iMac 27"
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
PC Desktop
</td>
<td class="py-4 px-6">
$3999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table pagination #
Paginate the table data when using larger data sets based on any given amount of results per page.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
|
|
Product name | Color | Category | Price | Action |
|---|---|---|---|---|---|
|
|
Apple MacBook Pro 17" | Sliver | Laptop | $2999 | Edit |
|
|
Microsoft Surface Pro | White | Laptop PC | $1999 | Edit |
|
|
Magic Mouse 2 | Black | Accessories | $99 | Edit |
|
|
Apple Watch | Black | Watches | $199 | Edit |
|
|
Apple iMac | Silver | PC | $2999 | Edit |
|
|
Apple AirPods | White | Accessories | $399 | Edit |
|
|
iPad Pro | Gold | Tablet | $699 | Edit |
|
|
Magic Keyboard | Black | Accessories | $99 | Edit |
|
|
Smart Folio iPad Air | Blue | Accessories | $79 | Edit |
|
|
AirTag | Silver | Accessories | $29 | Edit |
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Watches
</td>
<td class="py-4 px-6">
$199
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple iMac
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
PC
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple AirPods
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$399
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
iPad Pro
</th>
<td class="py-4 px-6">
Gold
</td>
<td class="py-4 px-6">
Tablet
</td>
<td class="py-4 px-6">
$699
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Keyboard
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Smart Folio iPad Air
</th>
<td class="py-4 px-6">
Blue
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$79
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
AirTag
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$29
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
<nav class="flex justify-between items-center pt-4" aria-label="Table navigation">
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">Showing <span class="font-semibold text-gray-900 dark:text-white">1-10</span> of <span class="font-semibold text-gray-900 dark:text-white">1000</span></span>
<ul class="inline-flex items-center -space-x-px">
<li>
<a href="#" class="block py-2 px-3 ml-0 leading-tight text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
<li>
<a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
</li>
<li>
<a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
</li>
<li>
<a href="#" aria-current="page" class="z-10 py-2 px-3 leading-tight text-blue-600 bg-blue-50 border border-blue-300 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
</li>
<li>
<a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">...</a>
</li>
<li>
<a href="#" class="py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">100</a>
</li>
<li>
<a href="#" class="block py-2 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Next</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
</div>Checkbox selection #
Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.
Toggle dark mode
Loading...
- HTML
Copy to clipboard
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple Watch
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$179
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
iPad
</th>
<td class="py-4 px-6">
Gold
</td>
<td class="py-4 px-6">
Tablet
</td>
<td class="py-4 px-6">
$699
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
Apple iMac 27"
</th>
<td class="py-4 px-6">
Silver
</td>
<td class="py-4 px-6">
PC Desktop
</td>
<td class="py-4 px-6">
$3999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Table with users #
Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<div class="flex justify-between items-center pb-4 bg-white dark:bg-gray-900">
<div>
<button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Action button</span>
Action
<svg class="ml-2 w-3 h-3" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdownAction" class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Reward</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Promote</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Activate account</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete User</a>
</div>
</div>
</div>
<label for="table-search" class="sr-only">Search</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="table-search-users" class="block p-2 pl-10 w-80 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users">
</div>
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Name
</th>
<th scope="col" class="py-3 px-6">
Position
</th>
<th scope="col" class="py-3 px-6">
Status
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Neil Sims</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
React Developer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Bonnie Green</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
Designer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Jese Leos</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
Vue JS Developer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Thomas Lean</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
UI/UX Engineer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Leslie Livingston</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
SEO Specialist
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2"></div> Offline
</div>
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
</tbody>
</table>
</div>Table with products #
Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="py-3 px-6">
<span class="sr-only">Image</span>
</th>
<th scope="col" class="py-3 px-6">
Product
</th>
<th scope="col" class="py-3 px-6">
Qty
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-32">
<img src="/docs/images/products/apple-watch.png" alt="Apple Watch">
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
Apple Watch
</td>
<td class="py-4 px-6">
<div class="flex items-center space-x-3">
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
<div>
<input type="number" id="first_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
</div>
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
$599
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-32">
<img src="/docs/images/products/imac.png" alt="Apple Imac">
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
Imac 27"
</td>
<td class="py-4 px-6">
<div class="flex items-center space-x-3">
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
<div>
<input type="number" id="second_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
</div>
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
$2499
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-32">
<img src="/docs/images/products/iphone-12.png" alt="Iphone 12">
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
Iphone 12
</td>
<td class="py-4 px-6">
<div class="flex items-center space-x-3">
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
<div>
<input type="number" id="third_product" class="bg-gray-50 w-14 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block px-2.5 py-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="1" required>
</div>
<button class="inline-flex items-center p-1 text-sm font-medium text-gray-500 bg-white rounded-full border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Quantity button</span>
<svg class="w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
</button>
</div>
</td>
<td class="py-4 px-6 font-semibold text-gray-900 dark:text-white">
$999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline">Remove</a>
</td>
</tr>
</tbody>
</table>
</div>Table with modal #
Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<div class="flex justify-between items-center py-4 bg-white dark:bg-gray-800">
<div>
<button id="dropdownActionButton" data-dropdown-toggle="dropdownAction" class="inline-flex items-center text-gray-500 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-3 py-1.5 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" type="button">
<span class="sr-only">Action button</span>
Action
<svg class="ml-2 w-3 h-3" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</button>
<!-- Dropdown menu -->
<div id="dropdownAction" class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600">
<ul class="py-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownActionButton">
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Reward</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Promote</a>
</li>
<li>
<a href="#" class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Activate account</a>
</li>
</ul>
<div class="py-1">
<a href="#" class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Delete User</a>
</div>
</div>
</div>
<label for="table-search" class="sr-only">Search</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
</div>
<input type="text" id="table-search-users" class="block p-2 pl-10 w-80 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search for users">
</div>
</div>
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="p-4">
<div class="flex items-center">
<input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-all-search" class="sr-only">checkbox</label>
</div>
</th>
<th scope="col" class="py-3 px-6">
Name
</th>
<th scope="col" class="py-3 px-6">
Position
</th>
<th scope="col" class="py-3 px-6">
Status
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-1" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Neil Sims</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
React Developer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<!-- Modal toggle -->
<a href="#" type="button" data-modal-toggle="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Bonnie Green</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
Designer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<!-- Modal toggle -->
<a href="#" type="button" data-modal-toggle="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Jese Leos</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
Vue JS Developer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<!-- Modal toggle -->
<a href="#" type="button" data-modal-toggle="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-2" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-2" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Thomas Lean</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
UI/UX Engineer
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2"></div> Online
</div>
</td>
<td class="py-4 px-6">
<!-- Modal toggle -->
<a href="#" type="button" data-modal-toggle="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
<tr class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-600">
<td class="p-4 w-4">
<div class="flex items-center">
<input id="checkbox-table-search-3" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="checkbox-table-search-3" class="sr-only">checkbox</label>
</div>
</td>
<th scope="row" class="flex items-center py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Jese image">
<div class="pl-3">
<div class="text-base font-semibold">Leslie Livingston</div>
<div class="font-normal text-gray-500">[email protected]</div>
</div>
</th>
<td class="py-4 px-6">
SEO Specialist
</td>
<td class="py-4 px-6">
<div class="flex items-center">
<div class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2"></div> Offline
</div>
</td>
<td class="py-4 px-6">
<!-- Modal toggle -->
<a href="#" type="button" data-modal-toggle="editUserModal" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Edit user</a>
</td>
</tr>
</tbody>
</table>
<!-- Edit user modal -->
<div id="editUserModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center p-4 w-full md:inset-0 h-modal md:h-full">
<div class="relative w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<form action="#" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Edit user
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="editUserModal">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div class="grid grid-cols-6 gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="first-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">First Name</label>
<input type="text" name="first-name" id="first-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Bonnie" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="last-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Last Name</label>
<input type="text" name="last-name" id="last-name" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Green" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
<input type="email" name="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="[email protected]" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="phone-number" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone Number</label>
<input type="number" name="phone-number" id="phone-number" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="e.g. +(12)3456 789" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="department" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Department</label>
<input type="text" name="department" id="department" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Development" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="company" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Company</label>
<input type="number" name="company" id="company" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="123456" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="current-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Current Password</label>
<input type="password" name="current-password" id="current-password" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="••••••••" required="">
</div>
<div class="col-span-6 sm:col-span-3">
<label for="new-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">New Password</label>
<input type="password" name="new-password" id="new-password" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="••••••••" required="">
</div>
</div>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save all</button>
</div>
</form>
</div>
</div>
</div>Comparison table #
Use this example to compare values inside a table such as a pricing card.
Toggle dark mode
Loading...
- HTML
<div id="detailed-pricing" class="overflow-x-auto w-full">
<div class="overflow-hidden min-w-max">
<div class="grid grid-cols-4 gap-x-16 p-4 text-sm font-medium text-gray-900 bg-gray-100 border-t border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="flex items-center">Tailwind CSS code</div>
<div>Community Edition</div>
<div>Developer Edition</div>
<div>Designer Edition</div>
</div>
<div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<div class="text-gray-500 dark:text-gray-400">Basic components (<a href="#" class="text-blue-600 hover:underline">view all</a>)</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
</div>
<div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<div class="text-gray-500 dark:text-gray-400">Application UI (<a href="#" class="text-blue-600 hover:underline">view demo</a>)</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
</div>
<div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<div class="text-gray-500 dark:text-gray-400">Marketing UI pre-order</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
</div>
<div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<div class="text-gray-500 dark:text-gray-400">E-commerce UI pre-order</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</div>
<div>
<svg class="w-5 h-5 text-red-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</div>
</div>
<div class="grid grid-cols-4 gap-x-16 py-5 px-4 text-sm text-gray-700 border-b border-gray-200 dark:border-gray-700">
<div class="text-gray-500 dark:text-gray-400"></div>
<div>
<a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
</div>
<div>
<a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
</div>
<div>
<a href="#" class="text-white block w-full bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-4 py-2.5 text-center dark:focus:ring-blue-900">Buy now</a>
</div>
</div>
</div>
</div>Table colors #
Apply any color to the table element by using the bg-{color} and text-{color} color class variants from Tailwind CSS.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-blue-100 dark:text-blue-100">
<thead class="text-xs text-white uppercase bg-blue-600 dark:text-white">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-blue-40">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Striped rows color #
Use this example to apply a different color to every second row inside the table.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-blue-100 dark:text-blue-100">
<thead class="text-xs text-white uppercase bg-blue-600 dark:text-white">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-500 border-blue-40">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Striped columns color #
Use this example to apply a different color to every second column inside a colored table.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-blue-100 dark:text-blue-100">
<thead class="text-xs text-white uppercase bg-blue-600 border-b border-blue-400 dark:text-white">
<tr>
<th scope="col" class="py-3 px-6 bg-blue-500">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6 bg-blue-500">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6 bg-blue-500">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap bg-blue-500 dark:text-blue-100">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6 bg-blue-500">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6 bg-blue-500">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap bg-blue-500 dark:text-blue-100">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6 bg-blue-500">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6 bg-blue-500">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap bg-blue-500 dark:text-blue-100">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6 bg-blue-500">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6 bg-blue-500">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap bg-blue-500 dark:text-blue-100">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6 bg-blue-500">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
<td class="py-4 px-6 bg-blue-500">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-blue-40">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap bg-blue-500 dark:text-blue-100">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6 bg-blue-500">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
<td class="py-4 px-6 bg-blue-500">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Hover state #
Use this example to apply a different color to every second row inside the table with a colored background.
Toggle dark mode
Loading...
- HTML
<div class="overflow-x-auto relative shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-blue-100 dark:text-blue-100">
<thead class="text-xs text-white uppercase bg-blue-600 border-b border-blue-400 dark:text-white">
<tr>
<th scope="col" class="py-3 px-6">
Product name
</th>
<th scope="col" class="py-3 px-6">
Color
</th>
<th scope="col" class="py-3 px-6">
Category
</th>
<th scope="col" class="py-3 px-6">
Price
</th>
<th scope="col" class="py-3 px-6">
Action
</th>
</tr>
</thead>
<tbody>
<tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple MacBook Pro 17"
</th>
<td class="py-4 px-6">
Sliver
</td>
<td class="py-4 px-6">
Laptop
</td>
<td class="py-4 px-6">
$2999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Microsoft Surface Pro
</th>
<td class="py-4 px-6">
White
</td>
<td class="py-4 px-6">
Laptop PC
</td>
<td class="py-4 px-6">
$1999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Magic Mouse 2
</th>
<td class="py-4 px-6">
Black
</td>
<td class="py-4 px-6">
Accessories
</td>
<td class="py-4 px-6">
$99
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-b border-blue-400 hover:bg-blue-500">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Google Pixel Phone
</th>
<td class="py-4 px-6">
Gray
</td>
<td class="py-4 px-6">
Phone
</td>
<td class="py-4 px-6">
$799
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
<tr class="bg-blue-600 border-blue-400 hover:bg-blue-500">
<th scope="row" class="py-4 px-6 font-medium text-blue-50 whitespace-nowrap dark:text-blue-100">
Apple Watch 5
</th>
<td class="py-4 px-6">
Red
</td>
<td class="py-4 px-6">
Wearables
</td>
<td class="py-4 px-6">
$999
</td>
<td class="py-4 px-6">
<a href="#" class="font-medium text-white hover:underline">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>