Glass Data Table

---
---
<div class="table-wrap">
  <table>
    <thead><tr><th>User</th><th>Status</th><th>Role</th><th>Activity</th></tr></thead>
    <tbody>
      <tr><td>Alex Smith</td><td><span class="st st-active">Active</span></td><td>Admin</td><td>2m ago</td></tr>
      <tr><td>Maria Garcia</td><td><span class="st st-away">Away</span></td><td>Editor</td><td>1h ago</td></tr>
      <tr><td>James Wilson</td><td><span class="st st-offline">Offline</span></td><td>Viewer</td><td>2d ago</td></tr>
    </tbody>
  </table>
</div>
<style>
  .table-wrap { width: 100%; overflow-x: auto; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; backdrop-filter: blur(10px); }
  table { width: 100%; border-collapse: collapse; text-align: left; }
  th { padding: 1rem 1.5rem; background: rgba(255,255,255,0.03); color: #818cf8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid rgba(255,255,255,0.06); }
  td { padding: 1rem 1.5rem; color: #e2e8f0; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
  tr:hover td { background: rgba(255,255,255,0.02); }
  .st { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
  .st-active { background: rgba(16,185,129,0.1); color: #34d399; }
  .st-away { background: rgba(245,158,11,0.1); color: #fbbf24; }
  .st-offline { background: rgba(100,116,139,0.1); color: #94a3b8; }
</style>