Tailwind CSS User Table
A user table for Tailwind CSS with avatars, roles, status badges, a row actions menu, and pagination. Built with the table, badge, and pagination components.
<div class="card card-sm w-full gap-0">
<div class="card-header border-b">
<h3 class="card-title">Team members</h3>
<p class="card-description">Manage who has access to the workspace.</p>
<div class="card-action self-end">
<button class="btn btn-sm" type="button">
<svg
class="icon-start"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line></svg
>Invite member
</button>
</div>
</div>
<div class="table-container">
<table class="table">
<thead class="table-header bg-muted/40">
<tr class="table-row">
<th class="table-head w-10 ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select all members"
/>
</th>
<th class="table-head">Member</th>
<th class="table-head">Role</th>
<th class="table-head">Status</th>
<th class="table-head">Last active</th>
<th class="table-head pe-4"></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Leila Navarro"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">LN</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Leila Navarro</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Owner</td>
<td class="table-cell">
<span class="badge badge-outline">Active</span>
</td>
<td class="table-cell text-muted-foreground">Just now</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-0"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Leila Navarro"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-0"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Maya Santoso"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">MS</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Maya Santoso</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Admin</td>
<td class="table-cell">
<span class="badge badge-outline">Active</span>
</td>
<td class="table-cell text-muted-foreground">12 minutes ago</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-1"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Maya Santoso"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-1"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Sofia Lindqvist"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">SL</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Sofia Lindqvist</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-outline">Active</span>
</td>
<td class="table-cell text-muted-foreground">2 hours ago</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-2"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Sofia Lindqvist"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-2"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Anouk Visser"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">AV</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Anouk Visser</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-secondary">Invited</span>
</td>
<td class="table-cell text-muted-foreground">Never</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-3"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Anouk Visser"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-3"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Amara Okafor"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1573496527892-904f897eb744?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">AO</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Amara Okafor</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Viewer</td>
<td class="table-cell">
<span class="badge badge-outline">Active</span>
</td>
<td class="table-cell text-muted-foreground">Yesterday</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-4"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Amara Okafor"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-4"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Zara Delacroix"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1631377307475-9acfa929b062?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">ZD</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Zara Delacroix</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Member</td>
<td class="table-cell">
<span class="badge badge-destructive">Suspended</span>
</td>
<td class="table-cell text-muted-foreground">Aug 21, 2026</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-5"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Zara Delacroix"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-5"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
<tr class="table-row">
<td class="table-cell ps-4">
<input
type="checkbox"
class="checkbox"
aria-label="Select Paulina Nowak"
/>
</td>
<td class="table-cell">
<div class="flex min-w-0 items-center gap-3">
<span class="avatar"
><img
class="avatar-image"
src="https://images.unsplash.com/photo-1780733057947-7b57f5108f68?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
alt=""
/><span class="avatar-fallback">PN</span></span
>
<div class="flex min-w-0 flex-col gap-0.5">
<span class="truncate font-medium">Paulina Nowak</span
><span class="truncate text-xs text-muted-foreground"
>[email protected]</span
>
</div>
</div>
</td>
<td class="table-cell">Admin</td>
<td class="table-cell">
<span class="badge badge-outline">Active</span>
</td>
<td class="table-cell text-muted-foreground">3 days ago</td>
<td class="table-cell pe-4 text-end">
<button
type="button"
id="user-table-menu-6"
class="btn btn-ghost btn-sm btn-icon"
aria-label="Open menu for Paulina Nowak"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
<div
class="dropdown"
data-sp-toggle="#user-table-menu-6"
data-sp-placement="bottom-end"
>
<button class="dropdown-item" type="button">Edit profile</button
><button class="dropdown-item" type="button">Change role</button
><button class="dropdown-item" type="button">
Reset password
</button>
<div class="dropdown-separator"></div>
<button
class="dropdown-item dropdown-item-destructive"
type="button"
>
Remove from team
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-between border-t">
<button
class="btn btn-outline btn-sm max-sm:btn-icon"
type="button"
disabled=""
>
<svg
class="icon-start max-sm:hidden"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg
><svg
class="sm:hidden"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path></svg
><span class="max-sm:sr-only">Previous</span>
</button>
<nav
class="pagination pagination-sm max-sm:hidden"
aria-label="Members pages"
>
<a href="#" class="pagination-item active">1</a
><a href="#" class="pagination-item">2</a
><a href="#" class="pagination-item">3</a
><a href="#" class="pagination-item">4</a
><a href="#" class="pagination-item">5</a
><span class="pagination-ellipsis"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle></svg
><span class="sr-only">More pages</span></span
><a href="#" class="pagination-item">10</a>
</nav>
<span class="text-sm sm:hidden">Page 1 of 10</span
><button class="btn btn-outline btn-sm max-sm:btn-icon" type="button">
<span class="max-sm:sr-only">Next</span
><svg
class="icon-end max-sm:hidden"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path></svg
><svg
class="sm:hidden"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>