Lista/Tarjetas del panel de control

<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>