Retour à la communauté 
Liste/Cartes du tableau de bord
Aperçu
Kyle Kozlowski Administrateur
Inscrit il y a 2 mois
Cotisations 4
Visiter le profilÀ propos de ce composant
Je ne sais pas
#carte#mode sombre#tableau
Extrait de code
<div class="grid grid-cols-2 lg:grid-cols-3 gap-8">
<div class="col-span-2 space-y-6">
<div class="bg-[#171717] border border-white/5 rounded-2xl overflow-hidden shadow-sm">
<div class="p-6 border-b border-white/5 flex items-center justify-between bg-white/[0.01]">
<h3 class="font-bold text-white">Recent Users</h3>
<button class="text-xs font-bold text-emerald-500 hover:text-emerald-400 uppercase tracking-widest">View
All</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead>
<tr class="text-[10px] font-bold text-slate-500 uppercase tracking-widest border-b border-white/5">
<th class="px-6 py-4">User</th>
<th class="px-6 py-4">Plan</th>
<th class="px-6 py-4">Status</th>
<th class="px-6 py-4">Joined</th>
<th class="px-6 py-4 text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold text-xs">
AS</div>
<div>
<p class="text-sm font-bold text-white leading-tight">Alex Smith</p>
<p class="text-[10px] text-slate-500 font-medium">alex@example.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-400 font-medium">Developer</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-500 text-[10px] font-bold uppercase">
<span class="w-1 h-1 rounded-full bg-emerald-500"></span> Active
</span>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-500 font-medium">2h ago</span>
</td>
<td class="px-6 py-4 text-right">
<button class="p-1.5 text-slate-500 hover:text-white hover:bg-white/5 rounded-lg transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-400 font-bold text-xs">
SB</div>
<div>
<p class="text-sm font-bold text-white leading-tight">Sarah Brown</p>
<p class="text-[10px] text-slate-500 font-medium">sarah@domain.io</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-400 font-medium">Pro</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-500 text-[10px] font-bold uppercase">
<span class="w-1 h-1 rounded-full bg-amber-500"></span> Pending
</span>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-500 font-medium">5h ago</span>
</td>
<td class="px-6 py-4 text-right">
<button class="p-1.5 text-slate-500 hover:text-white hover:bg-white/5 rounded-lg transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
</button>
</td>
</tr>
<tr class="group hover:bg-white/[0.02] transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold text-xs">
MK</div>
<div>
<p class="text-sm font-bold text-white leading-tight">Marcus King</p>
<p class="text-[10px] text-slate-500 font-medium">m.king@tech.com</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-400 font-medium">Enterprise</span>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-500 text-[10px] font-bold uppercase">
<span class="w-1 h-1 rounded-full bg-emerald-500"></span> Active
</span>
</td>
<td class="px-6 py-4">
<span class="text-xs text-slate-500 font-medium">1d ago</span>
</td>
<td class="px-6 py-4 text-right">
<button class="p-1.5 text-slate-500 hover:text-white hover:bg-white/5 rounded-lg transition-all">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="12" cy="5" r="1"></circle>
<circle cx="12" cy="19" r="1"></circle>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-[#171717] border border-white/5 rounded-2xl p-6">
<h3 class="font-bold text-white mb-6">Recent Activity</h3>
<div class="space-y-6 relative before:absolute before:left-2 before:top-2 before:bottom-2 before:w-0.5 before:bg-white/5">
<div class="relative pl-8">
<div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-emerald-500 ring-4 ring-[#171717]"></div>
<p class="text-xs font-bold text-white leading-tight">Database Backup Completed</p>
<p class="text-[10px] text-slate-500 font-medium mt-0.5">Project: Production Main • 12m ago</p>
</div>
<div class="relative pl-8">
<div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 ring-4 ring-[#171717]"></div>
<p class="text-xs font-bold text-white leading-tight">New Deployment Successful</p>
<p class="text-[10px] text-slate-500 font-medium mt-0.5">Version 2.4.1-alpha • 1h ago</p>
</div>
<div class="relative pl-8">
<div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-purple-500 ring-4 ring-[#171717]"></div>
<p class="text-xs font-bold text-white leading-tight">API Key Regenerated</p>
<p class="text-[10px] text-slate-500 font-medium mt-0.5">User: kyle.jk • 3h ago</p>
</div>
<div class="relative pl-8 opacity-50">
<div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-slate-700 ring-4 ring-[#171717]"></div>
<p class="text-xs font-bold text-white leading-tight">Schema Migration Applied</p>
<p class="text-[10px] text-slate-500 font-medium mt-0.5">6 tables updated • 5h ago</p>
</div>
</div>
<button class="w-full mt-8 py-2.5 bg-white/5 hover:bg-white/10 text-white text-xs font-bold rounded-xl border border-white/5 transition-all">View
All Activity</button>
</div>
<div class="bg-gradient-to-br from-emerald-500/20 to-blue-500/20 border border-emerald-500/20 rounded-2xl p-6 relative overflow-hidden group">
<div class="absolute -right-4 -bottom-4 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl group-hover:scale-150 transition-transform">
</div>
<h4 class="font-bold text-white mb-2 relative z-10">Run out of space?</h4>
<p class="text-xs text-slate-400 leading-relaxed mb-6 relative z-10">You're currently using 82% of your storage.
Upgrade to Pro to get unlimited space and priority support.</p>
<button class="w-full py-2.5 bg-emerald-500 text-[#0a0a0a] text-xs font-bold rounded-xl hover:bg-emerald-400 transition-all shadow-lg shadow-emerald-500/20 relative z-10">Upgrade
to Pro</button>
</div>
</div>
</div>