Tailwind CSS Tables (Dark & Light)

Components

Tailwind CSS Tables - Madhuranjan UI

Explore a variety of responsive, accessible, and fully styled table layouts using pure Tailwind CSS. Designed to fit seamlessly into dashboards, admin panels, e-commerce platforms, and content-heavy applications with full dark/light mode support.

Simple Table

A clean and minimal table for displaying structured data. Ideal for use cases where clarity and readability are key.

Name	Role	Email	Status
John Doe	Developer	[email protected]	Active
Jane Smith	Designer	[email protected]	Inactive
John Doe	Developer	[email protected]	Active
Jane Smith	Designer	[email protected]	Inactive

1 <div class=" overflow-x-auto shadow-sm border border-gray-200 dark:border-gray-700">
2        <table class=" text-sm text-left text-gray-700 dark:text-gray-100 w-[100%]">
3          <thead class="bg-violet-100 dark:bg-blue-900 text-gray-900 dark:text-white">
4            <tr>
5              <th scope="col" class="px-6 py-4">Name</th>
6              <th scope="col" class="px-6 py-4">Role</th>
7              <th scope="col" class="px-6 py-4">Email</th>
8              <th scope="col" class="px-6 py-4">Status</th>
9            </tr>
10          </thead>

Striped Table

Alternate row colors improve scanability, making it easier for users to track data across columns.

Name	Role	Email	Status
John Doe	Developer	[email protected]	Active
Jane Smith	Designer	[email protected]	Inactive
Emily Stone	Product Manager	[email protected]	Active
Michael Brown	QA Engineer	[email protected]	Active
Sarah Johnson	Support	[email protected]	Inactive
Chris White	DevOps	[email protected]	Active

1<div class="w-full overflow-x-auto shadow-sm border border-gray-200 dark:border-gray-700">
2  <table class="min-w-full text-sm text-left text-gray-700 dark:text-gray-300">
3    <thead class="bg-violet-100 dark:bg-blue-900 text-gray-900 dark:text-white">
4      <tr>
5        <th class="px-6 py-4">Name</th>
6        <th class="px-6 py-4">Role</th>
7        <th class="px-6 py-4">Email</th>
8        <th class="px-6 py-4">Status</th>
9      </tr>
10    </thead>

Striped Table with Hover

This table style combines alternating row colors with hover interactions, giving it a modern and interactive feel.

Name	Role	Email	Status
John Doe	Developer	[email protected]	Active
Jane Smith	Designer	[email protected]	Inactive
Emily Stone	Product Manager	[email protected]	Active
Michael Brown	QA Engineer	[email protected]	Active
Sarah Johnson	Support	[email protected]	Inactive
Chris White	DevOps	[email protected]	Active

1<div class="w-full overflow-x-auto border border-gray-200 dark:border-gray-700 shadow-sm">
2  <table class="min-w-full text-sm text-left text-gray-700 dark:text-gray-300">
3    <thead class="bg-violet-100 dark:bg-blue-900 text-gray-900 dark:text-white">
4      <tr>
5        <th class="px-6 py-5 whitespace-nowrap">Name</th>
6        <th class="px-6 py-5 whitespace-nowrap">Role</th>
7        <th class="px-6 py-5 whitespace-nowrap">Email</th>
8        <th class="px-6 py-5 whitespace-nowrap">Status</th>
9      </tr>
10    </thead>

Table with Action Buttons

Enhance user interaction by adding edit and delete buttons. Perfect for admin panels and data management interfaces.

Full Name	Joining Date	Email Address	Status	Actions
Ava Mitchell	Jan 12, 2024	[email protected]	Active	Delete Edit
Liam Carter	Feb 23, 2024	[email protected]	Pending	Delete Edit
Sophia Nguyen	Mar 1, 2024	[email protected]	Inactive	Delete Edit
Noah Patel	Mar 19, 2024	[email protected]	Active	Delete Edit

1<div class="w-full overflow-x-auto  border border-gray-200 dark:border-gray-700 shadow-sm bg-white dark:bg-gray-900">
2  <table class="min-w-full text-sm text-left text-gray-700 dark:text-gray-300">
3    <thead class="bg-violet-100 dark:bg-blue-900 text-gray-900 dark:text-white">
4      <tr>
5        <th class="px-6 py-4 font-semibold whitespace-nowrap">Full Name</th>
6        <th class="px-6 py-4 font-semibold whitespace-nowrap">Joining Date</th>
7        <th class="px-6 py-4 font-semibold whitespace-nowrap">Email Address</th>
8        <th class="px-6 py-4 font-semibold whitespace-nowrap">Status</th>
9        <th class="px-6 py-4 font-semibold text-right whitespace-nowrap">Actions</th>
10      </tr>

Table with Avatars & Status

Display user avatars, statuses, and detailed info in a user-friendly format. Great for teams, employee lists, and profiles.

Name	State	Role	Team
Isabelle Moore [email protected]	Active	Frontend Engineer	DesignProductDev
Jacob Riley [email protected]	Pending	QA Analyst	TestSupport
Sophia Gomez [email protected]	Inactive	UX Strategist	UX
Ethan Walker [email protected]	Active	Backend Engineer	API
Nina Patel [email protected]	Active	Project Manager	Ops

1<div class="overflow-x-auto border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm">
2  <table class="min-w-full text-sm text-left text-gray-700 dark:text-gray-300">
3    <thead class="bg-violet-100 dark:bg-gray-800 text-gray-900 dark:text-white">
4      <tr>
5        <th class="px-6 py-4 font-semibold">Name</th>
6        <th class="px-6 py-4 font-semibold">State</th>
7        <th class="px-6 py-4 font-semibold">Role</th>
8        <th class="px-6 py-4 font-semibold">Team</th>
9        <th class="px-6 py-4 font-semibold text-right">Actions</th>
10      </tr>

Table with Footer Summary

Add a subtotal or summary footer for financial or product listings, commonly used in invoices or reports.

Product	Unit Price	Quantity	Discount	Subtotal
Product A	$50.00	2	5%	$95.00
Product B	$30.00	3	0%	$90.00
Product C	$20.00	5	10%	$90.00
Subtotal				$275.00

1<div class="overflow-x-auto border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow rounded">
2  <table class="min-w-full">
3    <thead class="bg-gray-100 dark:bg-gray-800">
4      <tr>
5        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
6        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Unit Price</th>
7        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Quantity</th>
8        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Discount</th>
9        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Subtotal</th>
10      </tr>

Table with Search, Filter, and Pagination

Built for scale, this interactive table allows users to search, filter, and navigate paginated content.

Name	Color	Category	Price	Action
MacBook Pro 17"	Silver	Laptop	$2999	Edit
MacBook Pro	White	Laptop PC	$1999	Edit
Apple Watch	Black	Accessories	$99	Edit
iPad	Gold	Tablet	$799	Edit
Apple iMac 27"	Black	PC Desktop	$1799	Edit

Showing 1 to 5 of 25 results

1<div class=" bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
2  <div class="flex flex-col items-start justify-between gap-4 px-4 py-5 sm:px-6 md:flex-row md:items-center lg:px-8">
3    <div class="group relative inline-block">
4      <button class="inline-flex items-center rounded border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-100 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900">
5        Last 30 days
6        <svg class="ml-2 h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
7          <path d="M6 9l6 6 6-6" />
8        </svg>
9      </button>
10      <div class="absolute left-0 z-10 mt-1 hidden w-44 rounded border border-gray-200 bg-white shadow-md group-hover:block dark:border-gray-700 dark:bg-gray-800">

Product Table

A tailored layout for product listings with images, quantity controls, and pricing—ideal for e-commerce carts.

Product	Qty	Price
MacBook Pro 16 Apple laptop	1	$2499
PlayStation 5 Sony console	1	$499
AirPods Max Apple headphones	2	$1098
Nintendo Switch Nintendo console	1	$299
Apple TV 4K Streaming device	1	$179

1   <div class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6">
2      <div class="max-w-6xl mx-auto">
3        <div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg">
4          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
5            <thead class="bg-gray-100 dark:bg-gray-800">
6              <tr>
7                <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-200">
8                  Product
9                </th>
10                <th class="px-6 py-3 text-center text-xs font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-200">

Comparison Table

Easily compare features across multiple plans or products. Great for pricing pages or SaaS tier comparisons.

Features	Basic	Pro	Enterprise
Storage	5GB	50GB	Unlimited
Support
Custom Domain
Analytics
Priority Support

1<div class="overflow-x-auto px-4 py-8">
2  <div class="mx-auto max-w-7xl">
3    <table class="min-w-full overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
4      <thead class="bg-indigo-600 text-white dark:bg-indigo-700">
5        <tr>
6          <th class="px-6 py-4 text-left text-sm font-semibold tracking-wider uppercase">Features</th>
7          <th class="px-6 py-4 text-center text-sm font-semibold tracking-wider uppercase">Basic</th>
8          <th class="px-6 py-4 text-center text-sm font-semibold tracking-wider uppercase">Pro</th>
9          <th class="px-6 py-4 text-center text-sm font-semibold tracking-wider uppercase">Enterprise</th>
10        </tr>

Skeleton Loader Toast