dashboard admin user-management table pagination corporate corporate
Dashboard Admin Panel
Corporate admin panel with user management table, role filters, and pagination.
corporate Responsive
Live Preview
Sections
sidebarbreadcrumbfiltersuser-tablepagination
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AdminHub — User Management</title>
<meta name="description" content="Corporate admin panel with user management, filters, and pagination." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — dark navy sidebar identity */
:root {
--color-primary: #0ea5e9;
--color-primary-hover: #0284c7;
--color-primary-soft: #e0f2fe;
--color-primary-text: #ffffff;
--brand-sidebar-bg: #0f172a;
--brand-sidebar-border: #1e293b;
--brand-sidebar-text: #94a3b8;
--brand-sidebar-active: #1e293b;
}
/* interactions/table-row-highlight */
.table-row-highlight {
--row-highlight-bg: color-mix(in srgb, currentColor 6%, transparent);
--row-highlight-border: color-mix(in srgb, currentColor 12%, transparent);
transition:
background-color 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
.table-row-highlight:hover,
.table-row-highlight:focus-within,
.table-row-highlight[data-active="true"],
.table-row-highlight.is-active {
background-color: var(--row-highlight-bg);
box-shadow: inset 0 0 0 1px var(--row-highlight-border);
}
@media (prefers-reduced-motion: reduce) {
.table-row-highlight { transition-duration: 1ms; }
}
/* interactions/scrollbar */
.custom-scrollbar {
--scrollbar-width: 0.5rem;
--scrollbar-track: oklch(0.95 0 0);
--scrollbar-thumb: oklch(0.75 0 0);
--scrollbar-thumb-hover: oklch(0.55 0 0);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
.custom-scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
</style>
</head>
<body class="bg-gray-100 text-gray-900 antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="ws-sidebar hidden lg:flex lg:flex-col w-60 text-white" style="background-color: var(--brand-sidebar-bg);">
<div class="flex items-center gap-2 h-16 px-5 border-b" style="border-color: var(--brand-sidebar-border);">
<svg class="w-7 h-7" style="color: var(--color-primary);" viewBox="0 0 28 28" fill="none" aria-hidden="true"><rect width="28" height="28" rx="6" fill="currentColor"/><path d="M8 10h12M8 14h8M8 18h10" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/></svg>
<span class="text-base font-bold">AdminHub</span>
</div>
<nav class="flex-1 px-3 py-5 space-y-1" aria-label="Admin navigation">
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors" style="color: var(--brand-sidebar-text);" onmouseover="this.style.background='var(--brand-sidebar-active)';this.style.color='#fff'" onmouseout="this.style.background='';this.style.color='var(--brand-sidebar-text)'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
Overview
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-white" style="background-color: var(--brand-sidebar-active);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
Users
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors" style="color: var(--brand-sidebar-text);" onmouseover="this.style.background='var(--brand-sidebar-active)';this.style.color='#fff'" onmouseout="this.style.background='';this.style.color='var(--brand-sidebar-text)'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
Roles & Permissions
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors" style="color: var(--brand-sidebar-text);" onmouseover="this.style.background='var(--brand-sidebar-active)';this.style.color='#fff'" onmouseout="this.style.background='';this.style.color='var(--brand-sidebar-text)'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
Audit Log
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors" style="color: var(--brand-sidebar-text);" onmouseover="this.style.background='var(--brand-sidebar-active)';this.style.color='#fff'" onmouseout="this.style.background='';this.style.color='var(--brand-sidebar-text)'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
Settings
</a>
</nav>
<div class="px-3 py-4 border-t" style="border-color: var(--brand-sidebar-border);">
<div class="flex items-center gap-3 px-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white" style="background-color: var(--color-primary);">MR</div>
<div>
<p class="text-sm font-medium">Mike Ross</p>
<p class="text-xs" style="color: var(--brand-sidebar-text);">Super Admin</p>
</div>
</div>
</div>
</aside>
<!-- Main -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Bar -->
<header class="ws-navbar flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
<nav class="flex items-center gap-2 text-sm text-gray-500" aria-label="Breadcrumb">
<a href="#" class="hover:text-gray-700">Admin</a>
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 5l7 7-7 7"/></svg>
<span class="text-gray-900 font-medium">Users</span>
</nav>
<div class="flex items-center gap-3">
<div class="relative">
<input type="text" placeholder="Search users..." class="w-56 pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent" style="--tw-ring-color: var(--color-primary);" />
<svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/></svg>
</div>
</div>
</header>
<!-- Content -->
<main class="ws-dashboard flex-1 overflow-y-auto custom-scrollbar p-6">
<!-- Actions Bar -->
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
<div>
<h1 class="text-xl font-semibold text-gray-900">User Management</h1>
<p class="text-sm text-gray-500">Manage user accounts, roles, and permissions</p>
</div>
<div class="flex items-center gap-3">
<select class="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2" style="--tw-ring-color: var(--color-primary);">
<option>All Roles</option>
<option>Admin</option>
<option>Editor</option>
<option>Viewer</option>
</select>
<select class="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white focus:outline-none focus:ring-2" style="--tw-ring-color: var(--color-primary);">
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
<option>Suspended</option>
</select>
<button class="px-4 py-2 text-sm font-semibold text-white rounded-lg shadow-sm hover:opacity-90 transition-opacity" style="background-color: var(--color-primary);">+ Add User</button>
</div>
</div>
<!-- Table -->
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-50 text-gray-500 uppercase text-xs">
<tr>
<th class="px-6 py-3 font-medium"><input type="checkbox" class="rounded border-gray-300" aria-label="Select all" /></th>
<th class="px-6 py-3 font-medium">Name</th>
<th class="px-6 py-3 font-medium">Email</th>
<th class="px-6 py-3 font-medium">Role</th>
<th class="px-6 py-3 font-medium">Status</th>
<th class="px-6 py-3 font-medium">Last Active</th>
<th class="px-6 py-3 font-medium">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4"><input type="checkbox" class="rounded border-gray-300" aria-label="Select user" /></td>
<td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-xs font-semibold text-indigo-700">AJ</div><span class="font-medium text-gray-900">Anna Johnson</span></div></td>
<td class="px-6 py-4 text-gray-600">anna.johnson@company.com</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-purple-50 text-purple-700">Admin</span></td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Active</span></td>
<td class="px-6 py-4 text-gray-500">2 hours ago</td>
<td class="px-6 py-4"><div class="flex items-center gap-2"><button class="text-gray-400 transition-colors" style="color: inherit;" onmouseover="this.style.color='var(--color-primary)'" onmouseout="this.style.color=''" aria-label="Edit user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button><button class="text-gray-400 hover:text-red-600 transition-colors" aria-label="Delete user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></div></td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4"><input type="checkbox" class="rounded border-gray-300" aria-label="Select user" /></td>
<td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center text-xs font-semibold text-emerald-700">BT</div><span class="font-medium text-gray-900">Brian Torres</span></div></td>
<td class="px-6 py-4 text-gray-600">brian.torres@company.com</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-50 text-blue-700">Editor</span></td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Active</span></td>
<td class="px-6 py-4 text-gray-500">5 hours ago</td>
<td class="px-6 py-4"><div class="flex items-center gap-2"><button class="text-gray-400 transition-colors" style="color: inherit;" onmouseover="this.style.color='var(--color-primary)'" onmouseout="this.style.color=''" aria-label="Edit user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button><button class="text-gray-400 hover:text-red-600 transition-colors" aria-label="Delete user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></div></td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4"><input type="checkbox" class="rounded border-gray-300" aria-label="Select user" /></td>
<td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-xs font-semibold text-amber-700">CL</div><span class="font-medium text-gray-900">Clara Lee</span></div></td>
<td class="px-6 py-4 text-gray-600">clara.lee@company.com</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-gray-100 text-gray-700">Viewer</span></td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-50 text-amber-700">Inactive</span></td>
<td class="px-6 py-4 text-gray-500">3 days ago</td>
<td class="px-6 py-4"><div class="flex items-center gap-2"><button class="text-gray-400 transition-colors" style="color: inherit;" onmouseover="this.style.color='var(--color-primary)'" onmouseout="this.style.color=''" aria-label="Edit user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button><button class="text-gray-400 hover:text-red-600 transition-colors" aria-label="Delete user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></div></td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4"><input type="checkbox" class="rounded border-gray-300" aria-label="Select user" /></td>
<td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center text-xs font-semibold text-rose-700">DK</div><span class="font-medium text-gray-900">David Kim</span></div></td>
<td class="px-6 py-4 text-gray-600">david.kim@company.com</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-blue-50 text-blue-700">Editor</span></td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-50 text-red-700">Suspended</span></td>
<td class="px-6 py-4 text-gray-500">1 week ago</td>
<td class="px-6 py-4"><div class="flex items-center gap-2"><button class="text-gray-400 transition-colors" style="color: inherit;" onmouseover="this.style.color='var(--color-primary)'" onmouseout="this.style.color=''" aria-label="Edit user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button><button class="text-gray-400 hover:text-red-600 transition-colors" aria-label="Delete user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></div></td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4"><input type="checkbox" class="rounded border-gray-300" aria-label="Select user" /></td>
<td class="px-6 py-4"><div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-sky-100 flex items-center justify-center text-xs font-semibold text-sky-700">EP</div><span class="font-medium text-gray-900">Elena Petrov</span></div></td>
<td class="px-6 py-4 text-gray-600">elena.petrov@company.com</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-purple-50 text-purple-700">Admin</span></td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Active</span></td>
<td class="px-6 py-4 text-gray-500">Just now</td>
<td class="px-6 py-4"><div class="flex items-center gap-2"><button class="text-gray-400 transition-colors" style="color: inherit;" onmouseover="this.style.color='var(--color-primary)'" onmouseout="this.style.color=''" aria-label="Edit user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg></button><button class="text-gray-400 hover:text-red-600 transition-colors" aria-label="Delete user"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button></div></td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="ws-pagination flex items-center justify-between px-6 py-4 border-t border-gray-200">
<p class="text-sm text-gray-500">Showing <span class="font-medium text-gray-900">1</span> to <span class="font-medium text-gray-900">5</span> of <span class="font-medium text-gray-900">48</span> users</p>
<nav class="flex items-center gap-1" aria-label="Pagination">
<button class="px-3 py-1.5 text-sm font-medium text-gray-500 rounded-lg hover:bg-gray-100" disabled>Previous</button>
<button class="px-3 py-1.5 text-sm font-medium rounded-lg text-white" style="background-color: var(--color-primary);">1</button>
<button class="px-3 py-1.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">2</button>
<button class="px-3 py-1.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">3</button>
<span class="px-2 text-gray-400">...</span>
<button class="px-3 py-1.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">10</button>
<button class="px-3 py-1.5 text-sm font-medium text-gray-700 rounded-lg hover:bg-gray-100">Next</button>
</nav>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Corporate admin panel with dark sidebar, user management table, role/status filters, action buttons, and pagination. Clean slate and sky accent palette.