W3CRM - Customer Relationship Management Tailwind CSS Admin Dashboard Template

Recent Payments Queue

#	PATIENT	DR NAME	DATE	STATUS	PRICE
01	Mr. Bobby	Dr. Jackson	01 August 2020	Successful	$21.56	Edit Delete
02	Mr. Bobby	Dr. Jackson	01 August 2020	Canceled	$21.56	Edit Delete
03	Mr. Bobby	Dr. Jackson	01 August 2020	Pending	$21.56	Edit Delete


	<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] inline-block text-success bg-success-light">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-[#444444] 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-[#444444] text-left 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-[#242424] 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:bg-transparent dark:text-white" 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:bg-transparent dark:text-white" 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#242424] 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:bg-transparent dark:text-white" 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:bg-transparent dark:text-white" 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#242424] 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:bg-transparent dark:text-white" 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:bg-transparent dark:text-white" href="javascript:void(0);">Delete</a>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

Exam Toppers

ROLL NO.	NAME	Email	Date	Status
542	Dr. Jackson	example@example.com	01 August 2020	Successful
542	Dr. Jackson	example@example.com	01 August 2020	Canceled
542	Dr. Jackson	example@example.com	01 August 2020	Pending


	<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 checkbox-success">
							<input type="checkbox" class="form-check-input checkAll w-6 h-6" id="checkInput checkAll" 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-[#444444] 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 checkbox-success">
							<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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 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-[#444444] 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 checkbox-success">
							<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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 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-[#444444] 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 checkbox-success">
							<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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 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-left">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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] inline-block text-primary bg-primary-light dark:bg-[#1E1E1E] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-left">Price</th>
				</tr>
			</thead>
			<tbody>
				<tr class="bg-[#f2f2f2] dark:bg-[#242424]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] inline-block text-success bg-success-light 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-[#444444] 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-[#444444] text-left text-success">$55.32</td>
				</tr>
				<tr  class="bg-[#f2f2f2] dark:bg-[#242424]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left text-danger">$14.85</td>
				</tr>
			</tbody>
		</table>
	</div>

Table Bordered

Add Table Bordered class with datatables

#	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]">#</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]">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]">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]">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-left border-b border-[#f2f2f2]">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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-left">Price</th>
				</tr>
			</thead>
			<tbody>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium leading-[1.5] inline-block text-primary bg-primary-light dark:bg-[#1E1E1E] 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-[#444444] 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-[#444444] text-left text-primary">$21.56</td>
				</tr>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left text-success">$55.32</td>
				</tr>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-left" scope="col">Sales</th>
				</tr>
			</thead>
			<tbody>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-primary-light-3 dark:border-transparent bg-primary-light dark:bg-[#1E1E1E] text-primary">70%</span>
					</td>
				</tr>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="inline-block font-medium 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-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-d-light-2 bg-d-light text-dark">70%</span>
					</td>
				</tr>
				<tr class="hover:bg-[#ececec] dark:hover:bg-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="inline-block font-medium 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-[#1E1E1E]">
					<th class="dark:bg-transparent py-[0.9375rem] px-2.5 capitalize whitespace-nowrap border-t border-[#E6E6E6] dark:border-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-body-color"><span class="inline-block font-medium 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]">#</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]">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]">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]">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-left border-b border-[#f2f2f2]">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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] 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-[#444444] text-left text-danger">$14.85</td>
				</tr>
			</tbody>
		</table>
	</div>

Bordered Table

Task	Progress	Deadline	Label
Air Conditioner	70% Complete	Apr 20,2018	70%
Textiles	70% Complete	May 27,2018	70%
Milk Powder	70% Complete	May 18,2018	70%
Vehicles	70% Complete	Mar 27,2018	70%
Boats	70% Complete	Jun 28,2018	70%


	<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]" 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]" 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]" 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]" 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-left border-b border-[#f2f2f2]" scope="col">Action</th>
				</tr>
			</thead>
			<tbody>
				<tr class="bg-[#f2f2f2] dark:bg-[#242424]">
					<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-primary-light-3 dark:border-transparent bg-primary-light dark:bg-[#1E1E1E] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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-[#242424]">
					<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-dark 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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

Task	Progress	Deadline	Label
Air Conditioner	70% Complete	Apr 20,2018	70%
Textiles	70% Complete	May 27,2018	70%
Milk Powder	70% Complete	May 18,2018	70%
Boats	70% Complete	Jun 28,2018	70%


	<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]" 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]" 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]" 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]" 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-left border-b border-[#f2f2f2]" scope="col">Action</th>
				</tr>
			</thead>
			<tbody>
				<tr class="bg-[#f2f2f2] dark:bg-[#242424]">
					<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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-[#242424]">
					<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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium leading-[1.5] rounded text-xs py-[5px] px-3 border border-transparent text-white bg-dark 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="inline-block font-medium 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-[#444444] text-left 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-left">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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left"><span class="text-xs py-[5px] px-3 rounded font-medium 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-[#444444] text-left 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	@twitter


	<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-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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	@twitter


	<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-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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	@twitter
4	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter
5	Larry	the Bird	@twitter


	<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-left text-white bg-primary-dark" scope="col">Handle</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@mdo</td>
				</tr>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@fat</td>
				</tr>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@twitter</td>
				</tr>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@twitter</td>
				</tr>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@twitter</td>
				</tr>
				<tr>
					<th class="dark:bg-primary 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 bg-primary">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 bg-primary">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 bg-primary">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-left text-white bg-primary">@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-left">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-[#444444] text-left text-body-color bg-[#d9dbe1] dark:bg-[#1E1E1E]">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-[#444444] text-left text-body-color bg-[#d9dbe1] dark:bg-[#1E1E1E]">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-[#444444] text-left text-body-color bg-[#d9dbe1] dark:bg-[#1E1E1E]">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-[#444444] text-left text-body-color bg-[#d9dbe1] dark:bg-[#1E1E1E]">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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left 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-[#444444] 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-[#444444] 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-[#444444] 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-[#444444] text-left text-danger bg-danger-light">Column content</td>
				</tr>
			</tbody>
		</table>
	</div>

Chat List

Chat with Khelesh

Notications

Notes

Recent Payments Queue

Exam Toppers

Basic

Table Striped

Table Bordered

Table Hover

Hover Table

Table Bordered

Bordered Table

Table Stripped

Responsive Table

Heading With Background

Heading With Background

Primary Table Hover

Contextual Table

Datatabls

Chat List

Chat with Khelesh

Notications

Notes

Youtube, a video-sharing website, goes live $500.

New order placed #XF-2356.

john just buy your product Sell $250

StumbleUpon is acquired by eBay.

Mashable, a news website and blog, goes live.

Mashable, a news website and blog, goes live.

Dr sultads Send you Photo

Resport created successfully

Reminder : Treatment Time!

Dr sultads Send you Photo

Resport created successfully

Reminder : Treatment Time!

Dr sultads Send you Photo

Resport created successfully

Reminder : Treatment Time!

Dr sultads Send you Photo

Resport created successfully

Reminder : Treatment Time!

Thomas Fleming

Recent Payments Queue

Exam Toppers

Basic

Table Striped

Table Bordered

Table Hover

Hover Table

Table Bordered

Bordered Table

Table Stripped

Responsive Table

Heading With Background

Heading With Background

Primary Table Hover

Contextual Table

Datatabls