Code · Live Preview
Componenthtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard Management</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<div class="card">
<div class="card-head">
<h1>Team Members</h1>
<span>5 total</span>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Department</th>
<th>Status</th>
<th>Last Active</th>
<th class="actions-col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="person">
<div class="avatar" style="background:#5B4CFF">AS</div>
<div>
<div class="name">Ananya Sharma</div>
<div class="email">ananya.sharma@company.com</div>
</div>
</div>
</td>
<td class="role">Admin</td>
<td class="dept">Operations</td>
<td><span class="badge active">Active</span></td>
<td class="last-active">2 min ago</td>
<td class="actions-cell">
<div class="actions">
<button class="icon-btn" title="Edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
</button>
<button class="icon-btn danger" title="Delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg>
</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="person">
<div class="avatar" style="background:#12B76A">RM</div>
<div>
<div class="name">Rohan Mehta</div>
<div class="email">rohan.mehta@company.com</div>
</div>
</div>
</td>
<td class="role">Editor</td>
<td class="dept">Marketing</td>
<td><span class="badge active">Active</span></td>
<td class="last-active">15 min ago</td>
<td class="actions-cell">
<div class="actions">
<button class="icon-btn" title="Edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
</button>
<button class="icon-btn danger" title="Delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg>
</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="person">
<div class="avatar" style="background:#B8860B">PN</div>
<div>
<div class="name">Priya Nair</div>
<div class="email">priya.nair@company.com</div>
</div>
</div>
</td>
<td class="role">Viewer</td>
<td class="dept">Finance</td>
<td><span class="badge pending">Pending</span></td>
<td class="last-active">1 hour ago</td>
<td class="actions-cell">
<div class="actions">
<button class="icon-btn" title="Edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
</button>
<button class="icon-btn danger" title="Delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg>
</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="person">
<div class="avatar" style="background:#E24C4B">KV</div>
<div>
<div class="name">Karan Verma</div>
<div class="email">karan.verma@company.com</div>
</div>
</div>
</td>
<td class="role">Editor</td>
<td class="dept">Sales</td>
<td><span class="badge inactive">Inactive</span></td>
<td class="last-active">3 days ago</td>
<td class="actions-cell">
<div class="actions">
<button class="icon-btn" title="Edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
</button>
<button class="icon-btn danger" title="Delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg>
</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="person">
<div class="avatar" style="background:#5B4CFF">SI</div>
<div>
<div class="name">Sneha Iyer</div>
<div class="email">sneha.iyer@company.com</div>
</div>
</div>
</td>
<td class="role">Admin</td>
<td class="dept">HR</td>
<td><span class="badge active">Active</span></td>
<td class="last-active">Just now</td>
<td class="actions-cell">
<div class="actions">
<button class="icon-btn" title="Edit">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
</button>
<button class="icon-btn danger" title="Delete">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"/></svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A clean admin dashboard table component built with pure HTML and CSS - no JavaScript, no frameworks. Shows a team members list with colored initials avatars, name and email, role, department, status badge, last active time, and edit/delete action buttons. Status badges have three states - Active (green), Pending (amber), and Inactive (red) - each with a matching dot indicator and soft background tint. Action buttons show a violet hover for edit and a red hover for delete using CSS transitions. Row hover adds a subtle background tint for scannability. Uses CSS custom properties for the full color system so changing the accent color takes one variable update. Manrope font loaded from Google Fonts. Two files - index.html and style.css - drop in a folder and open in a browser.
Added Sep 8, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation