Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

  • View profile
  • Add to btn-close friends
  • Add to group
  • Block
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Show All

Create Workout Plan Now

Gymove Fitness Admin Dashboard © 2023 All Rights Reserved

Made with by DexignZone

  1. Basic Table

  2. Home
  3. Basic Table

Tailwind Table.

Leverage Tailwind's versatile table components to improve actions in forms, dialogs, and other elements, offering full support for various sizes, states, and extended functionalities.

Tailwind Table

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 
															
<table class="table text-left mb-4 min-w-xl w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base" style="width:80px;">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">PATIENT</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">DR NAME</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">DATE</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">STATUS</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">PRICE</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right"></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>01</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mr. Bobby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Dr. Jackson</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-success bg-success/10">Successful</span></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$21.56</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="relative" x-data="{ open: false }">
					<button type="button" class="btn size-7.5 leading-8! p-0! justify-center bg-success/10 hover:shadow-btnsuccess duration-300" @click="open = true">
						<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="var(--color-success)" cx="5" cy="12" r="2"/><circle fill="var(--color-success)" cx="12" cy="12" r="2"/><circle fill="var(--color-success)" cx="19" cy="12" r="2"/></g></svg>
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl absolute top-full right-0 py-2 min-w-40 mt-1 z-1 text-left text-sm" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>02</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mr. Bobby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Dr. Jackson</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-danger bg-danger/10">Canceled</span></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$21.56</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="relative" x-data="{ open: false }">
					<button type="button" class="btn size-7.5 leading-8! p-0! justify-center bg-danger/10 duration-300" @click="open = true">
						<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="var(--color-danger)" cx="5" cy="12" r="2"/><circle fill="var(--color-danger)" cx="12" cy="12" r="2"/><circle fill="var(--color-danger)" cx="19" cy="12" r="2"/></g></svg>
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl absolute top-full right-0 py-2 min-w-40 mt-1 z-1 text-left text-sm" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
					</div>
				</div>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>03</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mr. Bobby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Dr. Jackson</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-warning bg-warning/10">Pending</span></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$21.56</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="relative" x-data="{ open: false }">
					<button type="button" class="btn size-7.5 leading-8! p-0! justify-center bg-warning/10 duration-300" @click="open = true">
						<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="var(--color-warning)" cx="5" cy="12" r="2"/><circle fill="var(--color-warning)" cx="12" cy="12" r="2"/><circle fill="var(--color-warning)" cx="19" cy="12" r="2"/></g></svg>
					</button>
					<div class="bg-dropdown shadow-dropdown rounded-xl absolute top-full right-0 py-2 min-w-40 mt-1 z-1 text-left text-sm" x-transition.duration.300ms x-show.transition.origin.top.right="open" x-cloak @click.away="open = false">
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
						<a class="py-2 px-3 block hover:bg-primary/10 hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

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
 
															
<table class="table text-left mb-4 min-w-xl w-full ItemsCheckboxSec text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base" style="width:50px;">
				<div class="form-check mr-4">
					<input type="checkbox" class="form-check-input checkAll size-6" id="checkAll" required="">
					<label class="ml-[0.313rem] mt-[0.113rem]" for="checkAll"></label>
				</div>
			</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">ROLL NO.</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">NAME</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Email</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right"></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="form-check mr-4">
					<input type="checkbox" class="form-check-input size-6" id="customCheckBox2" required="">
					<label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox2"></label>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>542</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="flex items-center">
					<img src="assets/images/avatar/small/avatar1.webp" class="rounded-xl mr-2 min-w-7.5" width="24" alt="">
					<span class="w-space-no">Dr. Jackson</span>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">example@example.com	</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><div class="flex items-center"><i class="fa fa-circle text-success mr-1"></i> Successful</div></td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="inline-flex">
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
				</div>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="form-check mr-4">
					<input type="checkbox" class="form-check-input size-6" id="customCheckBox3" required="">
					<label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox3"></label>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>542</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><div class="flex items-center"><img src="assets/images/avatar/small/avatar2.webp" class="rounded-xl mr-2 min-w-7.5" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">example@example.com	</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><div class="flex items-center"><i class="fa fa-circle text-danger mr-1"></i> Canceled</div></td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="inline-flex">
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
				</div>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="form-check mr-4">
					<input type="checkbox" class="form-check-input size-6" id="customCheckBox4" required="">
					<label class="ml-[0.313rem] mt-[0.113rem]" for="customCheckBox4"></label>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><strong>542</strong></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><div class="flex items-center"><img src="assets/images/avatar/small/avatar3.webp" class="rounded-xl mr-2 min-w-7.5" width="24" alt=""> <span class="w-space-no">Dr. Jackson</span></div></td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">example@example.com	</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">01 August 2020</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><div class="flex items-center"><i class="fa fa-circle text-warning mr-1"></i> Pending</div></td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">
				<div class="inline-flex">
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-primary hover:bg-primaryhover duration-300 mr-1"><i class="fa fa-pencil"></i></a>
					<a href="javascript:void(0);" class="size-6.5 leading-6.5 rounded-xl text-center text-white bg-danger hover:bg-dangerhover duration-300 sharp"><i class="fa fa-trash"></i></a>
				</div>
			</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-xl w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Name</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Man</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-primary bg-primary/10 border border-primary/10">Sale</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 22</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$21.56</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Women</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-success  border border-success">Tax</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 30</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$55.32</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Blue Backpack For Baby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-danger  border border-danger">Extended</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 25</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-danger text-right">$14.85</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Name</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr class="bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Man</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-primary">Sale</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 22</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$21.56</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Women</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-success">Tax</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 30</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$55.32</td>
		</tr>
		<tr  class="bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Blue Backpack For Baby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-danger">Extended</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 25</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-danger text-right">$14.85</td>
		</tr>
	</tbody>
</table>

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 
															   
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Name</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-heading font-medium text-base text-right">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor font-bold! text-base">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Kolor Tea Shirt For Man</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge text-white bg-primary">Sale</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 22</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">$21.56</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor font-bold! text-base">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Kolor Tea Shirt For Women</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge text-white bg-success">Tax</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 30</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">$55.32</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor font-bold! text-base">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Blue Backpack For Baby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge text-white bg-danger">Extended</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 25</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right text-danger">$14.85</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Name</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor max-sm:font-bold">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Man</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-primary border border-primary">Sale</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 22</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$21.56</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor max-sm:font-bold">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Kolor Tea Shirt For Women</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-success light">Tax</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 30</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">$55.32</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor max-sm:font-bold">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Blue Backpack For Baby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-danger">Extended</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">January 25</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-danger text-right">$14.85</td>
		</tr>
	</tbody>
</table>

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% 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base" scope="col">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base" scope="col">Product</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base" scope="col">Popularity</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right" scope="col">Sales</th>
		</tr>
	</thead>
	<tbody>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Air Conditioner</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
					<div class="h-1.5 rounded-xl bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right"><span class="badge border border-transparent bg-primary/10 text-primary">70%</span>
			</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Textiles</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
					<div class="h-1.5 rounded-xl bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right"><span class="badge border border-transparent text-white bg-success">70%</span>
			</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Milk Powder</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
					<div class="h-1.5 rounded-xl bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right"><span class="badge border border-transparent bg-[#312a2a33] text-white">70%</span>
			</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">4</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Vehicles</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(255, 87, 34, .1)">
					<div class="h-1.5 rounded-xl bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right"><span class="badge border border-transparent text-white bg-danger">70%</span>
			</td>
		</tr>
		<tr class="hover:bg-light">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">5</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Boats</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
					<div class="h-1.5 rounded-xl bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right"><span class="badge border border-transparent text-white bg-warning">70%</span>
			</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Name</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-heading font-medium text-base text-right">Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Kolor Tea Shirt For Man</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge bg-primary text-white">Sale</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 22</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right text-primary">$21.56</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Kolor Tea Shirt For Women</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge bg-success text-white">Tax</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 30</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right text-success">$55.32</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Blue Backpack For Baby</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge bg-danger text-white">Extended</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">January 25</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right text-danger">$14.85</td>
		</tr>
	</tbody>
</table>

Bordered Table

Task Progress Deadline Label Action
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% 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Task</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Progress</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Deadline</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Label</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-heading font-medium text-base text-right" scope="col">Action</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Air Conditioner</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
					<div class="h-1.5 rounded-xl bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Apr 20,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent bg-primary/10 text-primary">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Textiles</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
					<div class="h-1.5 rounded-xl bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">May 27,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-success">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Milk Powder</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
					<div class="h-1.5 rounded-xl bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">May 18,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent312a2a33] bg-[#312a2a33] text-white">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Vehicles</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(255, 87, 34, .1)">
					<div class="h-1.5 rounded-xl bg-danger" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Mar 27,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-danger">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Boats</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
					<div class="h-1.5 rounded-xl bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Jun 28,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-warning">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
	</tbody>
</table>

Table Stripped

Task Progress Deadline Label Action
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% 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Task</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Progress</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Deadline</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor text-heading font-medium text-base" scope="col">Label</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-heading font-medium text-base text-right" scope="col">Action</th>
		</tr>
	</thead>
	<tbody>
		<tr class="bg-light">
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Air Conditioner</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(127, 99, 244, .1)">
					<div class="h-1.5 rounded-xl bg-primary" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Apr 20,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-primary light">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Textiles</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(76, 175, 80, .1)">
					<div class="h-1.5 rounded-xl bg-success" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">May 27,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-success">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr class="bg-light">
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Milk Powder</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(70, 74, 83, .1)">
					<div class="h-1.5 rounded-xl bg-dark" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">May 18,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-[#312a2a]">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Boats</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">
				<div class="progress h-1.25 overflow-hidden" style="background: rgba(255, 193, 7, .1)">
					<div class="h-1.5 rounded-xl bg-warning" style="width: 70%;" role="progressbar"><span class="sr-only">70% Complete</span>
					</div>
				</div>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor">Jun 28,2018</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border border-bordercolor"><span class="badge border border-transparent text-white bg-warning">70%</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border border-bordercolor text-right">
				<span>
					<a href="javascript:void(0);" class="mr-6"	data-placement="top" title="Edit"><i class="fa fa-pencil color-muted"></i> </a>
					<a href="javascript:void(0);" title="btn-close"><i class="fa-solid fa-xmark text-danger"></i></a>
				</span>
			</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Invoice</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">User</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Date</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Amount</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Status</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right">Country</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><a href="javascript:void(0);">Order #26589</a>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Herman Beck</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span>Oct 16, 2017</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$45.00</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-success">Paid</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">EN</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><a href="javascript:void(0);">Order #58746</a>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mary Adams</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span>Oct 12, 2017</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$245.30</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-info bg-info/10 light">Shipped</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">CN</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><a href="javascript:void(0);">Order #98458</a>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Caleb Richards</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span>May 18, 2017</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$38.00</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-danger">Shipped</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">AU</td>
		</tr>
		<tr>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><a href="javascript:void(0);">Order #32658</a>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">June Lane</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span>Apr 28, 2017</span>
			</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">$77.99</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor"><span class="badge text-white bg-success">Paid</span>
			</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">FR</td>
		</tr>
	</tbody>
</table>

Heading With Background

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead class="thead-info">
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-info font-medium text-base text-white bg-info" scope="col">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-info font-medium text-base text-white bg-info" scope="col">First</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-info font-medium text-base text-white bg-info" scope="col">Last</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-info font-medium text-base text-white bg-info text-right" scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mark</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Otto</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@mdo</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Jacob</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Thornton</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@fat</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@twitter</td>
		</tr>
	</tbody>
</table>

Primary Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead class="thead-info">
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primary" scope="col">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primary" scope="col">First</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primary" scope="col">Last</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark font-medium text-base text-white bg-primary text-right" scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Mark</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Otto</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@mdo</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Jacob</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Thornton</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@fat</td>
		</tr>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-right">@twitter</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primarydark" scope="col">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primarydark" scope="col">First</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark font-medium text-base text-white bg-primarydark" scope="col">Last</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark font-medium text-base text-white bg-primarydark text-right" scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">1</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Mark</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Otto</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@mdo</td>
		</tr>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">2</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Jacob</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Thornton</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@fat</td>
		</tr>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">3</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@twitter</td>
		</tr>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">4</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@twitter</td>
		</tr>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">5</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@twitter</td>
		</tr>
		<tr class="bg-primary hover:bg-primary/80">
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">5</th>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">Larry</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-primarydark text-white">the Bird</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-primarydark text-right text-white">@twitter</td>
		</tr>
	</tbody>
</table>

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 
															
<table class="table text-left mb-4 min-w-120 w-full text-sm">
	<thead>
		<tr>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">#</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Column heading</th>
			<th class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-heading font-medium text-base">Column heading</th>
			<th class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-heading font-medium text-base text-right">Column heading</th>
		</tr>
	</thead>
	<tbody>
		<tr class="table-active">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor bg-light">1</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor bg-light">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor bg-light">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor bg-light text-right">Column content</td>
		</tr>
		<tr class="table-primary">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-primary bg-primary/10">1</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-primary bg-primary/10">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-primary bg-primary/10">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-primary bg-primary/10 text-right">Column content</td>
		</tr>
		<tr class="table-success">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-success bg-success/10">2</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-success bg-success/10">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-success bg-success/10">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-success bg-success/10 text-right">Column content</td>
		</tr>
		<tr class="table-info">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-info bg-info/10">3</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-info bg-info/10">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-info bg-info/10">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-info bg-info/10 text-right">Column content</td>
		</tr>
		<tr class="table-warning">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-warning bg-warning/10">4</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-warning bg-warning/10">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-warning bg-warning/10">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-warning bg-warning/10 text-right">Column content</td>
		</tr>
		<tr class="table-danger">
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-danger bg-danger/10">5</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-danger bg-danger/10">Column content</td>
			<td class="py-2.5 pe-3.75 ps-7.5 border-b border-bordercolor text-danger bg-danger/10">Column content</td>
			<td class="py-2.5 ps-3.75 pe-7.5 border-b border-bordercolor text-danger bg-danger/10 text-right">Column content</td>
		</tr>
	</tbody>
</table>
Quick Actions
    Help