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.

NameRoleEmailStatus
John DoeDeveloperjohn@example.comActive
Jane SmithDesignerjane@example.comInactive
John DoeDeveloperjohn@example.comActive
Jane SmithDesignerjane@example.comInactive
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.

NameRoleEmailStatus
John DoeDeveloperjohn@example.comActive
Jane SmithDesignerjane@example.comInactive
Emily StoneProduct Manageremily@example.comActive
Michael BrownQA Engineermichael@example.comActive
Sarah JohnsonSupportsarah@example.comInactive
Chris WhiteDevOpschris@example.comActive
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.

NameRoleEmailStatus
John DoeDeveloperjohn@example.comActive
Jane SmithDesignerjane@example.comInactive
Emily StoneProduct Manageremily@example.comActive
Michael BrownQA Engineermichael@example.comActive
Sarah JohnsonSupportsarah@example.comInactive
Chris WhiteDevOpschris@example.comActive
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 NameJoining DateEmail AddressStatusActions
Ava MitchellJan 12, 2024ava.mitchell@company.comActiveDeleteEdit
Liam CarterFeb 23, 2024liam.carter@company.comPendingDeleteEdit
Sophia NguyenMar 1, 2024sophia.nguyen@company.comInactiveDeleteEdit
Noah PatelMar 19, 2024noah.patel@company.comActiveDeleteEdit
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.

NameStateRoleTeamActions
Isabelle
Isabelle Moore
isabelle.moore@example.com
ActiveFrontend Engineer
DesignProductDev
Jacob
Jacob Riley
jacob.riley@team.io
PendingQA Analyst
TestSupport
Sophia
Sophia Gomez
sophia.gomez@company.io
InactiveUX Strategist
UX
Ethan
Ethan Walker
ethan.walker@startup.dev
ActiveBackend EngineerAPI
Nina
Nina Patel
nina.patel@dashboard.app
ActiveProject ManagerOps
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.

ProductUnit PriceQuantityDiscountSubtotal
Product A$50.0025%$95.00
Product B$30.0030%$90.00
Product C$20.00510%$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.

NameColorCategoryPriceAction
MacBook Pro 17"SilverLaptop$2999Edit
MacBook ProWhiteLaptop PC$1999Edit
Apple WatchBlackAccessories$99Edit
iPadGoldTablet$799Edit
Apple iMac 27"BlackPC Desktop$1799Edit
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.

ProductQtyPriceAction
MacBook Pro 16

MacBook Pro 16

Apple laptop

1
$2499
PlayStation 5

PlayStation 5

Sony console

1
$499
AirPods Max

AirPods Max

Apple headphones

2
$1098
Nintendo Switch

Nintendo Switch

Nintendo console

1
$299
Apple TV 4K

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.

FeaturesBasicProEnterprise
Storage5GB50GBUnlimited
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 LoaderToast