Tables Striped Rows - Tailwind Component
The tables adds zebra-stripes to a table with search box with sorting, it is use Tailwind CSS to create this beautiful table tailwind component.
tables
Loading component...
259 lines
<div class="items-center w-full px-4 py-4 mx-auto my-10 bg-white rounded-lg shadow-md sm:w-11/12">
<div class="container mx-auto">
<div class="flex justify-between w-full px-4 py-2 items-center">
<div class="text-xl font-bold">
List of Products
</div>
<button class="px-4 py-2 text-white bg-green-500 rounded-md hover:bg-green-600 focus:outline-none">
Add new product
</button>
</div>
<ul
class="flex flex-row space-x-2 sm:space-x-6 md:space-x-12 mt-4 mx-4 items-center border-b border-gray-300 overflow-auto text-sm">
<li class=" text-blue-500 group">
<a href="#">Indoor Plant</a>
<div
class="h-1 bg-blue-500 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
</div>
</li>
<li class="group">
<a href="#">Outside Plant</a>
<div
class="h-1 bg-blue-500 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
</div>
</li>
<li class="group">
<a href="#">Flower Pots</a>
<div
class="h-1 bg-blue-500 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
</div>
</li>
<li class="group">
<a href="#">Fertilizers and Soil</a>
<div
class="h-1 bg-blue-500 scale-x-0 group-hover:scale-100 transition-transform origin-left rounded-full duration-300 ease-out">
</div>
</li>
</ul>
<div
class="flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:justify-between w-full px-4 mb-2 mt-4 items-center">
<div class="flex bg-gray-100 w-full sm:w-2/5 items-center rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<input
class="w-full bg-gray-100 outline-none border-transparent focus:border-transparent focus:ring-0 rounded-lg text-sm"
type="text" placeholder="Search a product..." />
</div>
<div class="flex-row space-x-2 items-center ">
<select class="border border-gray-300 rounded-md text-gray-600 px-2 pl-2 pr-8 bg-white hover:border-gray-400 focus:outline-none text-xs
focus:ring-0">
<option>Filter by</option>
<option></option>
<option></option>
</select>
<select class="border border-gray-300 rounded-md text-gray-600 px-2 pl-2 pr-8 bg-white hover:border-gray-400 focus:outline-none text-xs
focus:ring-0">
<option>Short by</option>
<option></option>
<option></option>
</select>
<button class="border border-gray-300 rounded-md text-gray-600 px-3 py-[9px] bg-white hover:border-gray-400 focus:outline-none text-xs
focus:ring-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 13l-7 7-7-7m14-8l-7 7-7-7" />
</svg>
</button>
</div>
</div>
<div class="mt-6 overflow-x-auto">
<table class="w-full table-auto">
<thead class="">
<tr class="text-sm font-semibold text-center border-b-2 border-blue-500 uppercase">
<th class="px-4 py-3">Name</th>
<th class="px-4 py-3">Gross</th>
<th class="px-4 py-3">Net</th>
<th class="px-4 py-3">stock</th>
<th class="px-4 py-3">Avaible</th>
<th class="px-4 py-3">sold</th>
<th class="px-4 py-3">expire date</th>
<th class="px-4 py-3">action</th>
</tr>
</thead>
<tbody class="text-sm font-normal text-gray-700 text-center">
<tr class="py-10 bg-gray-100 hover:bg-gray-200 font-medium">
<td class="px-4 py-4">
Monstera
</td>
<td class="px-4 py-4">
48,00
</td>
<td class="px-4 py-4">
39,02
</td>
<td class="px-4 py-4">
A/22
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium text-red-500">10 pcs</div>
<div class="text-xs text-gray-500">
from 294 pcs.
</div>
</div>
</td>
<td class="px-4 py-4">
10 pcs
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium ">10-02-2022</div>
<div class="text-xs text-gray-500">
10 days
</div>
</div>
</td>
<td class="px-4 py-4">
<div class="flex-col lg:flex-row lg:space-x-2 items-center space-y-2 lg:space-y-0">
<button
class="items-center px-2 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
<button
class="items-center px-2 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="py-10 bg-white hover:bg-gray-200 font-medium">
<td class="px-4 py-4">
Angelonis
</td>
<td class="px-4 py-4">
32,00
</td>
<td class="px-4 py-4">
28,16
</td>
<td class="px-4 py-4">
8/01
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium text-green-500">200 pcs</div>
<div class="text-xs text-gray-500">
from 294 pcs.
</div>
</div>
</td>
<td class="px-4 py-4">
200 pcs
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium ">12-01-2022</div>
<div class="text-xs text-gray-500">
32 days
</div>
</div>
</td>
<td class="px-4 py-4">
<div class="flex-col lg:flex-row lg:space-x-2 items-center space-y-2 lg:space-y-0">
<button
class="items-center px-2 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
<button
class="items-center px-2 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="py-10 bg-gray-100 hover:bg-gray-200 font-medium">
<td class="px-4 py-4">
Begonias
</td>
<td class="px-4 py-4">
16,00
</td>
<td class="px-4 py-4">
13,20
</td>
<td class="px-4 py-4">
A/02
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium text-green-500">140 pcs</div>
<div class="text-xs text-gray-500">
from 200 pcs.
</div>
</div>
</td>
<td class="px-4 py-4">
140 pcs
</td>
<td class="items-center px-4 py-4">
<div class="flex flex-col">
<div class="font-medium ">24-01-2022</div>
<div class="text-xs text-gray-500">
62 days
</div>
</div>
</td>
<td class="px-4 py-4">
<div class="flex-col lg:flex-row lg:space-x-2 items-center space-y-2 lg:space-y-0">
<button
class="items-center px-2 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</button>
<button
class="items-center px-2 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex flex-col items-center w-full px-4 py-4 text-sm text-gray-500 justify-center mx-auto">
<div class="flex items-center justify-between space-x-2">
<a href="#" class="hover:text-gray-600">Previous</a>
<div class="flex flex-row space-x-1">
<div class="flex px-2 py-px text-white bg-blue-400 border border-blue-400">1</div>
<div class="flex px-2 py-px border border-blue-400 hover:bg-blue-400 hover:text-white">2</div>
</div>
<a href="#" class="hover:text-gray-600">Next</a>
</div>
</div>
</div>
</div>