Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS User Management Table</title> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script> </head> <body class="bg-gray-50 flex justify-center min-h-screen pt-16 p-6 antialiased"> <div class="max-w-7xl w-full bg-white p-12 rounded-[4rem] shadow-4xl border border-white"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-12"> <div> <h2 class="text-3xl font-black text-slate-900 tracking-tight">User Management</h2> <p class="text-slate-500 mt-1 font-medium">Control sector-wide architect access and protocol permissions.</p> </div> <div class="flex items-center gap-3"> <div class="relative"> <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> <input type="text" placeholder="Search architects..." class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-medium"> </div> <button class="px-6 py-3 bg-slate-900 text-white rounded-xl text-xs font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-xl shadow-slate-100 cursor-pointer">Invite Member</button> </div> </div> <div class="overflow-x-auto"> <table class="w-full text-left border-collapse"> <thead> <tr class="border-b border-slate-50 text-[11px] font-bold text-slate-400 uppercase tracking-widest"> <th class="pb-6 pr-6">Architect</th> <th class="pb-6 px-6">Access Level</th> <th class="pb-6 px-6">Status</th> <th class="pb-6 px-6">Last Active</th> <th class="pb-6 pl-6 text-right">Actions</th> </tr> </thead> <tbody class="divide-y divide-slate-50"> <!-- User 1 --> <tr class="group hover:bg-slate-50/50 transition-colors"> <td class="py-6 pr-6"> <div class="flex items-center gap-4"> <div class="h-11 w-11 rounded-xl bg-indigo-50 border border-indigo-100 overflow-hidden shrink-0 shadow-sm"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <p class="text-base font-bold text-slate-900 leading-tight">Sarah Jenkins</p> <p class="text-xs text-slate-400 font-medium">sarah.j@vanguard-sync.com</p> </div> </div> </td> <td class="py-6 px-6"> <span class="px-3 py-1 bg-indigo-50 text-indigo-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-indigo-100">Senior Architect</span> </td> <td class="py-6 px-6"> <span class="flex items-center gap-1.5 px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-emerald-100 italic w-fit"> <span class="h-1.5 w-1.5 bg-emerald-500 rounded-full animate-pulse"></span> Active Syncing </span> </td> <td class="py-6 px-6 text-sm font-medium text-slate-500">12 min ago</td> <td class="py-6 pl-6 text-right"> <button class="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all cursor-pointer"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg> </button> </td> </tr> <!-- User 2 --> <tr class="group hover:bg-slate-50/50 transition-colors"> <td class="py-6 pr-6"> <div class="flex items-center gap-4"> <div class="h-11 w-11 rounded-xl bg-slate-50 border border-slate-100 overflow-hidden shrink-0 shadow-sm"> <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <p class="text-base font-bold text-slate-900 leading-tight">Alexander Sterling</p> <p class="text-xs text-slate-400 font-medium">a.sterling@vanguard-sync.com</p> </div> </div> </td> <td class="py-6 px-6"> <span class="px-3 py-1 bg-slate-900 text-white rounded-lg text-[10px] font-black uppercase tracking-widest border border-slate-900">Lead Protocol</span> </td> <td class="py-6 px-6"> <span class="flex items-center gap-1.5 px-3 py-1 bg-slate-100 text-slate-500 rounded-lg text-[10px] font-black uppercase tracking-widest border border-slate-200 w-fit"> <span class="h-1.5 w-1.5 bg-slate-400 rounded-full"></span> Standby </span> </td> <td class="py-6 px-6 text-sm font-medium text-slate-500">2h ago</td> <td class="py-6 pl-6 text-right"> <button class="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all cursor-pointer"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg> </button> </td> </tr> <!-- User 3 --> <tr class="group hover:bg-slate-50/50 transition-colors"> <td class="py-6 pr-6"> <div class="flex items-center gap-4"> <div class="h-11 w-11 rounded-xl bg-purple-50 border border-purple-100 overflow-hidden shrink-0 shadow-sm"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&h=100&fit=crop" class="h-full w-full object-cover"> </div> <div> <p class="text-base font-bold text-slate-900 leading-tight">Jessica Miller</p> <p class="text-xs text-slate-400 font-medium">j.miller@vanguard-sync.com</p> </div> </div> </td> <td class="py-6 px-6"> <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-purple-100">Regional Mirror</span> </td> <td class="py-6 px-6"> <span class="flex items-center gap-1.5 px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-black uppercase tracking-widest border border-emerald-100 italic w-fit"> <span class="h-1.5 w-1.5 bg-emerald-500 rounded-full animate-pulse"></span> Active Syncing </span> </td> <td class="py-6 px-6 text-sm font-medium text-slate-500">4h ago</td> <td class="py-6 pl-6 text-right"> <button class="p-2 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-all cursor-pointer"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /></svg> </button> </td> </tr> </tbody> </table> </div> <div class="mt-8 flex items-center justify-between"> <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">Showing 3 of 124 architects</p> <div class="flex gap-2"> <button class="px-4 py-2 bg-slate-100 text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest cursor-not-allowed">Previous Hub</button> <button class="px-4 py-2 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all cursor-pointer">Next Hub</button> </div> </div> </div> </body> </html>
