Recent Payments Queue
| # | PATIENT | DR NAME | DATE | STATUS | PRICE | |
|---|---|---|---|---|---|---|
| 01 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Successful | $21.56 |
|
| 02 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Canceled | $21.56 |
|
| 03 | Mr. Bobby | Dr. Jackson | 01 August 2020 | Pending | $21.56 |
|
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[36rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black" style="width:80px;"><strong class="font-medium text-[15px]">#</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">PATIENT</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">DR NAME</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">DATE</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">STATUS</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">PRICE</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>01</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mr. Bobby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Dr. Jackson</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-success bg-success-light dark:text-white dark:bg-[#3a9b941a]">Successful</span></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$21.56</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">
<div class="dropdown">
<button type="button" class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-success rounded-md dz-dropdown bg-success-light hover:bg-success duration-300 light sharp" data-dz-dropdown="dropdown-1">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dz-dropdown-menu dropdown-menu-end border py-2 rounded-md min-w-[10rem] z-[9] translate-x-[-96px] translate-y-1 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden border-b-color absolute bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] hidden" id="dropdown-1">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Edit</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>02</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mr. Bobby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Dr. Jackson</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-danger bg-danger-light">Canceled</span></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$21.56</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">
<div class="dropdown">
<button type="button" class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-danger rounded-md dz-dropdown bg-danger-light hover:bg-danger duration-300 light sharp" data-dz-dropdown="dropdown-2">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dz-dropdown-menu dropdown-menu-end border py-2 rounded-md min-w-[10rem] z-[9] translate-x-[-96px] translate-y-1 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden border-b-color absolute bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] hidden" id="dropdown-2">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Edit</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>03</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mr. Bobby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Dr. Jackson</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-warning bg-warning-light">Pending</span></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$21.56</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">
<div class="dropdown">
<button type="button" class="btn min-w-[2.4rem] p-[0.4375rem] h-[2.4rem] leading-[1.7] min-h-[2.5rem] btn-warning rounded-md dz-dropdown bg-warning-light hover:bg-warning duration-300 light sharp" data-dz-dropdown="dropdown-3">
<svg width="20px" height="20px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="5" cy="12" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="19" cy="12" r="2"/></g></svg>
</button>
<div class="dz-dropdown-menu dropdown-menu-end border py-2 rounded-md min-w-[10rem] z-[9] translate-x-[-96px] translate-y-1 shadow-[0_0_3.125rem_0_rgba(82,63,105,0.15)] overflow-hidden border-b-color absolute bg-white dark:bg-[#182237] dark:shadow-[0rem_0rem_0rem_0.0625rem_rgba(255,255,255,0.1)] hidden" id="dropdown-3">
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Edit</a>
<a class="dropdown-item py-2 px-5 text-body-color text-[13px] text-left block w-full whitespace-nowrap hover:bg-[#f8f9fa] hover:text-primary dark:hover:bg-[#151C2C]" href="javascript:void(0);">Delete</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Exam Toppers
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[36rem] w-full ItemsCheckboxSec">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black" style="width:50px;">
<div class="form-check leading-normal block min-h-[1.3125rem] pl-[1.5em] mb-0.5 mr-4 custom-checkbox">
<input type="checkbox" class="form-check-input checkAll w-6 h-6" id="checkInput" required="">
<label class="form-check-label" for="checkInput"></label>
</div>
</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">ROLL NO.</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">NAME</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">Email</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">Date</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]">Status</strong></th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-base text-sm font-normal text-left text-black"><strong class="font-medium text-[15px]"></strong></th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="form-check leading-normal block min-h-[1.3125rem] pl-[1.5em] mb-0.5 mr-4 custom-checkbox">
<input type="checkbox" class="form-check-input w-6 h-6" id="customCheckBox2" required="">
<label class="form-check-label" for="customCheckBox2"></label>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>542</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="flex items-center">
<img src="assets/images/avatar/1.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt="">
<span class="w-space-no">Dr. Jackson</span>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">example@example.com </td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><div class="flex items-center"><i class="fa fa-circle text-success mr-1"></i> Successful</div></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right">
<div class="flex">
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 mr-1"><i class="fa fa-pencil"></i></a>
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-danger hover:bg-danger-hover duration-300 sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="form-check leading-normal block min-h-[1.3125rem] pl-[1.5em] mb-0.5 mr-4 custom-checkbox">
<input type="checkbox" class="form-check-input w-6 h-6" id="customCheckBox3" required="">
<label class="form-check-label" for="customCheckBox3"></label>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>542</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><div class="flex items-center"><img src="assets/images/avatar/2.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">example@example.com </td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><div class="flex items-center"><i class="fa fa-circle text-danger mr-1"></i> Canceled</div></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right">
<div class="flex">
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 mr-1"><i class="fa fa-pencil"></i></a>
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-danger hover:bg-danger-hover duration-300 sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="form-check leading-normal block min-h-[1.3125rem] pl-[1.5em] mb-0.5 mr-4 custom-checkbox">
<input type="checkbox" class="form-check-input w-6 h-6" id="customCheckBox4" required="">
<label class="form-check-label" for="customCheckBox4"></label>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><strong>542</strong></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><div class="flex items-center"><img src="assets/images/avatar/3.jpg" class="rounded-lg mr-2 min-w-[1.875rem]" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">example@example.com </td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">01 August 2020</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><div class="flex items-center"><i class="fa fa-circle text-warning mr-1"></i> Pending</div></td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right">
<div class="flex">
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-primary hover:bg-hover-primary hover:border-hover-primary duration-300 mr-1"><i class="fa fa-pencil"></i></a>
<a href="javascript:void(0);" class="btn w-[1.625rem] h-[1.625rem] leading-[1.625rem] rounded-md text-center text-white bg-danger hover:bg-danger-hover duration-300 sharp"><i class="fa fa-trash"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Basic
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[36rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Name</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Man</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-primary bg-primary-light light border border-primary-light-3 dark:border-transparent">Sale</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 22</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary">$21.56</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Women</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success">Tax</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success">$55.32</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Blue Backpack For Baby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-danger">Extended</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 25</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Striped
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Name</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-right">Price</th>
</tr>
</thead>
<tbody>
<tr class="bg-[#f2f2f2] dark:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Man</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-primary">Sale</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 22</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary">$21.56</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Women</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-success bg-success-light dark:text-white dark:bg-[#3a9b941a] light">Tax</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success">$55.32</td>
</tr>
<tr class="bg-[#f2f2f2] dark:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Blue Backpack For Baby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-danger">Extended</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 25</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Bordered
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr class="border-t border-b-color">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Name</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-right border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Man</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-primary">Sale</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 22</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary">$21.56</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Women</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success">Tax</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success">$55.32</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Blue Backpack For Baby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-danger">Extended</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 25</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Table Hover
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Name</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-left">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium text-[15px] text-right">Price</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Man</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-primary bg-primary-light border border-primary-light-3 dark:border-transparent">Sale</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 22</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary">$21.56</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Women</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success light">Tax</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success">$55.32</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Blue Backpack For Baby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-danger bg-danger-light light light">Extended</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 25</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Hover Table
| # | Product | Popularity | Sales |
|---|---|---|---|
| 1 | Air Conditioner |
70% Complete
|
70% |
| 2 | Textiles |
70% Complete
|
70% |
| 3 | Milk Powder |
70% Complete
|
70% |
| 4 | Vehicles |
70% Complete
|
70% |
| 5 | Boats |
70% Complete
|
70% |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left" scope="col">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left" scope="col">Product</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left" scope="col">Popularity</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right" scope="col">Sales</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Air Conditioner</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(127, 99, 244, .1)">
<div class="h-[5px] rounded-md bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-primary-light-3 dark:border-transparent bg-primary-light text-primary">70%</span>
</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Textiles</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(76, 175, 80, .1)">
<div class="h-[5px] rounded-md bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-success">70%</span>
</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Milk Powder</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(70, 74, 83, .1)">
<div class="h-[5px] rounded-md bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-d-light-2 text-[#6e6e6e] bg-[#eeeeee]">70%</span>
</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">4</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Vehicles</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(255, 87, 34, .1)">
<div class="h-[5px] rounded-md bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-danger">70%</span>
</td>
</tr>
<tr class="hover:bg-[#ececec] dark:hover:bg-[#182237]">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">5</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Boats</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(255, 193, 7, .1)">
<div class="h-[5px] rounded-md bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-warning">70%</span>
</td>
</tr>
</tbody>
</table>
</div>
Table Bordered
| # | Name | Status | Date | Price |
|---|---|---|---|---|
| 1 | Kolor Tea Shirt For Man | Sale | January 22 | $21.56 |
| 2 | Kolor Tea Shirt For Women | Tax | January 30 | $55.32 |
| 3 | Blue Backpack For Baby | Extended | January 25 | $14.85 |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr class="border-t border-b-color">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Name</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-right border-b border-[#f2f2f2] dark:border-[#ffffff1a]">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Man</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-primary">Sale</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 22</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary">$21.56</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Kolor Tea Shirt For Women</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success">Tax</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success">$55.32</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] border-b border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Blue Backpack For Baby</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-danger">Extended</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">January 25</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger">$14.85</td>
</tr>
</tbody>
</table>
</div>
Bordered Table
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr class="border-t border-b-color">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Task</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Progress</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Deadline</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Label</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-right border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Air Conditioner</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(127, 99, 244, .1)">
<div class="h-[5px] rounded-md bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Apr 20,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-primary-light-3 dark:border-transparent bg-primary-light text-primary">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">
<span>
<a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a>
<a href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a>
</span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Textiles</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(76, 175, 80, .1)">
<div class="h-[5px] rounded-md bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">May 27,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-success">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Milk Powder</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(70, 74, 83, .1)">
<div class="h-[5px] rounded-md bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">May 18,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-[#6e6e6e] bg-[#eeeeee] light">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Vehicles</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(255, 87, 34, .1)">
<div class="h-[5px] rounded-md bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mar 27,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-danger">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Boats</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(255, 193, 7, .1)">
<div class="h-[5px] rounded-md bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Jun 28,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-warning">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
Table Stripped
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr class="border-t border-b-color">
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Task</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Progress</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Deadline</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-left border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Label</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] font-medium text-[15px] text-right border-b border-[#f2f2f2] dark:border-[#ffffff1a]" scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="bg-[#f2f2f2] dark:bg-[#182237]">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Air Conditioner</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(127, 99, 244, .1)">
<div class="h-[5px] rounded-md bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Apr 20,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-primary light">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">
<span>
<a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a>
<a href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a>
</span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Textiles</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(76, 175, 80, .1)">
<div class="h-[5px] rounded-md bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">May 27,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-success">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr class="bg-[#f2f2f2] dark:bg-[#182237]">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Milk Powder</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(70, 74, 83, .1)">
<div class="h-[5px] rounded-md bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">May 18,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-[#6e6e6e] bg-[#eeeeee] light">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Boats</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">
<div class="progress h-[5px] overflow-hidden" style="background: rgba(255, 193, 7, .1)">
<div class="h-[5px] rounded-md bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
</div>
</div>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Jun 28,2018</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="inline-block leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-warning">70%</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-x border-x-[#E6E6E6] sm:text-sm text-xs font-normal border-b border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color"><span><a href="javascript:void(0);" class="me-4" data-bs-toggle="tooltip"
data-placement="top" title="Edit"><i
class="fa fa-pencil color-muted"></i> </a><a
href="javascript:void(0);" data-bs-toggle="tooltip"
data-placement="top" title="btn-close"><i
class="fa-solid fa-xmark text-danger"></i></a></span>
</td>
</tr>
</tbody>
</table>
</div>
Responsive Table
| Invoice | User | Date | Amount | Status | Country |
|---|---|---|---|---|---|
| Order #26589 | Herman Beck | Oct 16, 2017 | $45.00 | Paid | EN |
| Order #58746 | Mary Adams | Oct 12, 2017 | $245.30 | Shipped | CN |
| Order #98458 | Caleb Richards | May 18, 2017 | $38.00 | Shipped | AU |
| Order #32658 | June Lane | Apr 28, 2017 | $77.99 | Paid | FR |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Invoice</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">User</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Date</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Amount</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Status</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><a href="javascript:void();">Order #26589</a>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Herman Beck</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-muted">Oct 16, 2017</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$45.00</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success">Paid</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">EN</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><a href="javascript:void();">Order #58746</a>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mary Adams</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-muted">Oct 12, 2017</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$245.30</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-info bg-info-light light">Shipped</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">CN</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><a href="javascript:void();">Order #98458</a>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Caleb Richards</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-muted">May 18, 2017</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$38.00</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-danger">Shipped</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">AU</td>
</tr>
<tr>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><a href="javascript:void();">Order #32658</a>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">June Lane</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color"><span class="text-muted">Apr 28, 2017</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">$77.99</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left"><span class="text-xs py-[5px] px-3 rounded leading-[1.5] inline-block text-white bg-success">Paid</span>
</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">FR</td>
</tr>
</tbody>
</table>
</div>
Heading With Background
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead class="thead-info">
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-info" scope="col">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-info" scope="col">First</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-info" scope="col">Last</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right text-white bg-info" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mark</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Otto</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@mdo</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Jacob</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Thornton</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@fat</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@twitter</td>
</tr>
</tbody>
</table>
</div>
Heading With Background
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead class="thead-info">
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary" scope="col">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary" scope="col">First</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary" scope="col">Last</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right text-white bg-primary" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Mark</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Otto</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@mdo</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Jacob</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Thornton</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@fat</td>
</tr>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#ffffff1a] sm:text-base text-sm font-semibold text-body-color text-left">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color">@twitter</td>
</tr>
</tbody>
</table>
</div>
Primary Table Hover
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Larry | the Bird | |
| 5 | Larry | the Bird | |
| 5 | Larry | the Bird |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-primary-dark py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary-dark" scope="col">#</th>
<th class="dark:bg-primary-dark py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary-dark" scope="col">First</th>
<th class="dark:bg-primary-dark py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left text-white bg-primary-dark" scope="col">Last</th>
<th class="dark:bg-primary-dark py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right text-white bg-primary-dark" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">1</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Mark</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Otto</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@mdo</td>
</tr>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">2</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Jacob</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Thornton</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@fat</td>
</tr>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">3</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@twitter</td>
</tr>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">4</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@twitter</td>
</tr>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">5</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@twitter</td>
</tr>
<tr class="bg-primary hover:bg-primary-light-8">
<th class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t sm:text-base text-sm font-semibold border-primary-dark text-left text-white">5</th>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">Larry</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-left text-white">the Bird</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-primary-dark text-right text-white">@twitter</td>
</tr>
</tbody>
</table>
</div>
Contextual Table
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
<div class="overflow-x-auto table-scroll">
<table class="table mb-4 min-w-[30rem] w-full">
<thead>
<tr>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">#</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Column heading</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-left">Column heading</th>
<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap font-medium sm:text-base text-sm text-right">Column heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color bg-[#d9dbe1] dark:bg-[#182237]">1</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color bg-[#d9dbe1] dark:bg-[#182237]">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-body-color bg-[#d9dbe1] dark:bg-[#182237]">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-body-color bg-[#d9dbe1] dark:bg-[#182237]">Column content</td>
</tr>
<tr class="table-primary">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-primary bg-primary-light">1</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-primary bg-primary-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-primary bg-primary-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-primary bg-primary-light">Column content</td>
</tr>
<tr class="table-success">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-success bg-success-light">2</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-success bg-success-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-success bg-success-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-success bg-success-light">Column content</td>
</tr>
<tr class="table-info">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-info bg-info-light">3</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-info bg-info-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-info bg-info-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-info bg-info-light">Column content</td>
</tr>
<tr class="table-warning">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-warning bg-warning-light">4</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-warning bg-warning-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-warning bg-warning-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-warning bg-warning-light">Column content</td>
</tr>
<tr class="table-danger">
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-danger bg-danger-light">5</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-danger bg-danger-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-left text-danger bg-danger-light">Column content</td>
<td class="py-[0.9375rem] px-2.5 capitalize whitespace-nowrap sm:text-sm text-xs font-normal border-t border-[#E6E6E6] dark:border-[#ffffff1a] text-right text-danger bg-danger-light">Column content</td>
</tr>
</tbody>
</table>
</div>