|$ curl https://forge-ai.dev/api/markdown?path=docs/components/data-display
$cat docs/data-display.md
updated Recently·22 min read·published
Data Display
Introduction
Data display components turn raw information into scannable UI. This guide covers production-ready patterns for avatars, badges, progress bars, skeleton loaders, stat cards, tables, timelines, and description lists — in plain HTML/CSS, Tailwind CSS, and Bootstrap.
ℹ
info
Keep data components visually consistent: use the same color semantics for status (success, warning, danger), align numbers to the right, and always provide text alternatives for icon-only indicators.
Avatars
Avatar sizes, initials, online status, and avatar groups.
avatars
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="row"> |
| 3 | <div class="av sm" style="background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="av md" style="background:#22C55E"> |
| 7 | AK |
| 8 | </div> |
| 9 | <div class="av lg" style="background:#EAB308"> |
| 10 | MR |
| 11 | </div> |
| 12 | <div class="av xl" style="background:#EF4444;font-size:13px"> |
| 13 | SP |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="row"> |
| 17 | <div class="av-group"> |
| 18 | <div class="av sm" style="background:#3B82F6;border:2px solid #0A0A0A"> |
| 19 | J |
| 20 | </div> |
| 21 | <div class="av sm" style="background:#22C55E;border:2px solid #0A0A0A;margin-left:-8px"> |
| 22 | A |
| 23 | </div> |
| 24 | <div class="av sm" style="background:#EAB308;border:2px solid #0A0A0A;margin-left:-8px"> |
| 25 | M |
| 26 | </div> |
| 27 | <div class="av more sm" style="margin-left:-8px"> |
| 28 | +3 |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="dot-group"> |
| 32 | <div class="av sm" style="background:#3B82F6"> |
| 33 | <span class="dot on"> |
| 34 | </span> |
| 35 | J |
| 36 | </div> |
| 37 | <div class="av sm" style="background:#22C55E"> |
| 38 | <span class="dot away"> |
| 39 | </span> |
| 40 | A |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:20px; |
| 16 | padding:20px; |
| 17 | align-items:center |
| 18 | } |
| 19 | .row { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:12px |
| 23 | } |
| 24 | .av { |
| 25 | display:inline-flex; |
| 26 | align-items:center; |
| 27 | justify-content:center; |
| 28 | border-radius:50%; |
| 29 | font-weight:700; |
| 30 | color:#fff; |
| 31 | position:relative |
| 32 | } |
| 33 | .sm { |
| 34 | width:32px; |
| 35 | height:32px; |
| 36 | font-size:11px |
| 37 | } |
| 38 | .md { |
| 39 | width:40px; |
| 40 | height:40px; |
| 41 | font-size:14px |
| 42 | } |
| 43 | .lg { |
| 44 | width:52px; |
| 45 | height:52px; |
| 46 | font-size:18px |
| 47 | } |
| 48 | .xl { |
| 49 | width:64px; |
| 50 | height:64px; |
| 51 | font-size:22px |
| 52 | } |
| 53 | .av-group { |
| 54 | display:flex |
| 55 | } |
| 56 | .more { |
| 57 | background:#1A1A2E!important; |
| 58 | color:#808080!important; |
| 59 | border:2px solid #0A0A0A; |
| 60 | font-size:10px |
| 61 | } |
| 62 | .dot { |
| 63 | position:absolute; |
| 64 | bottom:0; |
| 65 | right:0; |
| 66 | width:10px; |
| 67 | height:10px; |
| 68 | border-radius:50%; |
| 69 | border:2px solid #0A0A0A |
| 70 | } |
| 71 | .dot.on { |
| 72 | background:#22C55E |
| 73 | } |
| 74 | .dot.away { |
| 75 | background:#EAB308 |
| 76 | } |
| 77 | .dot-group { |
| 78 | display:flex; |
| 79 | gap:4px |
| 80 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 p-5 items-center bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-3"> |
| 3 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#3B82F6]"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold text-white bg-[#22C55E]"> |
| 7 | AK |
| 8 | </div> |
| 9 | <div class="w-[52px] h-[52px] rounded-full flex items-center justify-center text-lg font-bold text-white bg-[#EAB308]"> |
| 10 | MR |
| 11 | </div> |
| 12 | <div class="w-16 h-16 rounded-full flex items-center justify-center text-[13px] font-bold text-white bg-[#EF4444]"> |
| 13 | SP |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="flex items-center gap-3"> |
| 17 | <div class="flex -space-x-2"> |
| 18 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#3B82F6] border-2 border-[#0A0A0A]"> |
| 19 | J |
| 20 | </div> |
| 21 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#22C55E] border-2 border-[#0A0A0A]"> |
| 22 | A |
| 23 | </div> |
| 24 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#EAB308] border-2 border-[#0A0A0A]"> |
| 25 | M |
| 26 | </div> |
| 27 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[10px] font-bold text-[#808080] bg-[#1A1A2E] border-2 border-[#0A0A0A]"> |
| 28 | +3 |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="flex gap-1"> |
| 32 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#3B82F6] relative"> |
| 33 | <span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-[#22C55E] border-2 border-[#0A0A0A]"> |
| 34 | </span> |
| 35 | J |
| 36 | </div> |
| 37 | <div class="w-8 h-8 rounded-full flex items-center justify-center text-[11px] font-bold text-white bg-[#22C55E] relative"> |
| 38 | <span class="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-[#EAB308] border-2 border-[#0A0A0A]"> |
| 39 | </span> |
| 40 | A |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex align-items-center gap-3"> |
| 3 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:11px;background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:40px;height:40px;font-size:14px;background:#22C55E"> |
| 7 | AK |
| 8 | </div> |
| 9 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:52px;height:52px;font-size:18px;background:#EAB308"> |
| 10 | MR |
| 11 | </div> |
| 12 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:64px;height:64px;font-size:13px;background:#EF4444"> |
| 13 | SP |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="d-flex align-items-center gap-3"> |
| 17 | <div class="d-flex"> |
| 18 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:11px;background:#3B82F6;border:2px solid #0A0A0A"> |
| 19 | J |
| 20 | </div> |
| 21 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:11px;background:#22C55E;border:2px solid #0A0A0A;margin-left:-8px"> |
| 22 | A |
| 23 | </div> |
| 24 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:11px;background:#EAB308;border:2px solid #0A0A0A;margin-left:-8px"> |
| 25 | M |
| 26 | </div> |
| 27 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;font-size:10px;background:#1A1A2E;color:#808080;border:2px solid #0A0A0A;margin-left:-8px"> |
| 28 | +3 |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="d-flex gap-1"> |
| 32 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white position-relative" style="width:32px;height:32px;font-size:11px;background:#3B82F6"> |
| 33 | J |
| 34 | <span class="position-absolute bottom-0 end-0 rounded-circle" style="width:10px;height:10px;background:#22C55E;border:2px solid #0A0A0A"> |
| 35 | </span> |
| 36 | </div> |
| 37 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white position-relative" style="width:32px;height:32px;font-size:11px;background:#22C55E"> |
| 38 | A |
| 39 | <span class="position-absolute bottom-0 end-0 rounded-circle" style="width:10px;height:10px;background:#EAB308;border:2px solid #0A0A0A"> |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
Badges & Status
Pills, dots, and outlined badges for status, labels, and counts.
badges
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="row"> |
| 3 | <span class="badge solid success"> |
| 4 | Active |
| 5 | </span> |
| 6 | <span class="badge solid warning"> |
| 7 | Pending |
| 8 | </span> |
| 9 | <span class="badge solid danger"> |
| 10 | Failed |
| 11 | </span> |
| 12 | <span class="badge solid neutral"> |
| 13 | Draft |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="row"> |
| 17 | <span class="badge dot success"> |
| 18 | Online |
| 19 | </span> |
| 20 | <span class="badge dot warning"> |
| 21 | Away |
| 22 | </span> |
| 23 | <span class="badge dot danger"> |
| 24 | Offline |
| 25 | </span> |
| 26 | </div> |
| 27 | <div class="row"> |
| 28 | <span class="badge outline"> |
| 29 | v2.4.1 |
| 30 | </span> |
| 31 | <span class="badge outline"> |
| 32 | Beta |
| 33 | </span> |
| 34 | <span class="badge count"> |
| 35 | 99+ |
| 36 | </span> |
| 37 | </div> |
| 38 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:14px; |
| 16 | padding:20px; |
| 17 | align-items:center |
| 18 | } |
| 19 | .row { |
| 20 | display:flex; |
| 21 | flex-wrap:wrap; |
| 22 | gap:8px; |
| 23 | align-items:center; |
| 24 | justify-content:center |
| 25 | } |
| 26 | .badge { |
| 27 | display:inline-flex; |
| 28 | align-items:center; |
| 29 | gap:6px; |
| 30 | padding:4px 10px; |
| 31 | border-radius:999px; |
| 32 | font-size:11px; |
| 33 | font-weight:600; |
| 34 | font-family:system-ui, |
| 35 | sans-serif |
| 36 | } |
| 37 | .badge.solid.success { |
| 38 | background:rgba(34, |
| 39 | 197, |
| 40 | 94, |
| 41 | .12); |
| 42 | color:#22C55E |
| 43 | } |
| 44 | .badge.solid.warning { |
| 45 | background:rgba(234, |
| 46 | 179, |
| 47 | 8, |
| 48 | .12); |
| 49 | color:#EAB308 |
| 50 | } |
| 51 | .badge.solid.danger { |
| 52 | background:rgba(239, |
| 53 | 68, |
| 54 | 68, |
| 55 | .12); |
| 56 | color:#EF4444 |
| 57 | } |
| 58 | .badge.solid.neutral { |
| 59 | background:rgba(160, |
| 60 | 160, |
| 61 | 160, |
| 62 | .12); |
| 63 | color:#A0A0A0 |
| 64 | } |
| 65 | .badge.dot::before { |
| 66 | content:''; |
| 67 | width:6px; |
| 68 | height:6px; |
| 69 | border-radius:50% |
| 70 | } |
| 71 | .badge.dot.success::before { |
| 72 | background:#22C55E |
| 73 | } |
| 74 | .badge.dot.warning::before { |
| 75 | background:#EAB308 |
| 76 | } |
| 77 | .badge.dot.danger::before { |
| 78 | background:#EF4444 |
| 79 | } |
| 80 | .badge.dot { |
| 81 | color:#E0E0E0; |
| 82 | background:#151515; |
| 83 | border:1px solid #222 |
| 84 | } |
| 85 | .badge.outline { |
| 86 | background:transparent; |
| 87 | color:#00FF41; |
| 88 | border:1px solid #00FF41 |
| 89 | } |
| 90 | .badge.count { |
| 91 | background:#00FF41; |
| 92 | color:#0A0A0A; |
| 93 | padding:2px 8px |
| 94 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-3.5 p-5 items-center bg-[#0A0A0A]"> |
| 2 | <div class="flex flex-wrap gap-2 items-center justify-center"> |
| 3 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[rgba(34,197,94,0.12)] text-[#22C55E]"> |
| 4 | Active |
| 5 | </span> |
| 6 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[rgba(234,179,8,0.12)] text-[#EAB308]"> |
| 7 | Pending |
| 8 | </span> |
| 9 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[rgba(239,68,68,0.12)] text-[#EF4444]"> |
| 10 | Failed |
| 11 | </span> |
| 12 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[rgba(160,160,160,0.12)] text-[#A0A0A0]"> |
| 13 | Draft |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="flex flex-wrap gap-2 items-center justify-center"> |
| 17 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[#151515] border border-[#222] text-[#E0E0E0]"> |
| 18 | <span class="w-1.5 h-1.5 rounded-full bg-[#22C55E]"> |
| 19 | </span> |
| 20 | Online |
| 21 | </span> |
| 22 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[#151515] border border-[#222] text-[#E0E0E0]"> |
| 23 | <span class="w-1.5 h-1.5 rounded-full bg-[#EAB308]"> |
| 24 | </span> |
| 25 | Away |
| 26 | </span> |
| 27 | <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-[#151515] border border-[#222] text-[#E0E0E0]"> |
| 28 | <span class="w-1.5 h-1.5 rounded-full bg-[#EF4444]"> |
| 29 | </span> |
| 30 | Offline |
| 31 | </span> |
| 32 | </div> |
| 33 | <div class="flex flex-wrap gap-2 items-center justify-center"> |
| 34 | <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold bg-transparent text-[#00FF41] border border-[#00FF41]"> |
| 35 | v2.4.1 |
| 36 | </span> |
| 37 | <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-semibold bg-transparent text-[#00FF41] border border-[#00FF41]"> |
| 38 | Beta |
| 39 | </span> |
| 40 | <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-[#00FF41] text-[#0A0A0A]"> |
| 41 | 99+ |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center"> |
| 3 | <span class="badge rounded-pill fw-semibold" style="background:rgba(34,197,94,.12);color:#22C55E"> |
| 4 | Active |
| 5 | </span> |
| 6 | <span class="badge rounded-pill fw-semibold" style="background:rgba(234,179,8,.12);color:#EAB308"> |
| 7 | Pending |
| 8 | </span> |
| 9 | <span class="badge rounded-pill fw-semibold" style="background:rgba(239,68,68,.12);color:#EF4444"> |
| 10 | Failed |
| 11 | </span> |
| 12 | <span class="badge rounded-pill fw-semibold" style="background:rgba(160,160,160,.12);color:#A0A0A0"> |
| 13 | Draft |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center"> |
| 17 | <span class="badge rounded-pill fw-semibold d-inline-flex align-items-center gap-1" style="background:#151515;border:1px solid #222;color:#E0E0E0"> |
| 18 | <span class="rounded-circle" style="width:6px;height:6px;background:#22C55E"> |
| 19 | </span> |
| 20 | Online |
| 21 | </span> |
| 22 | <span class="badge rounded-pill fw-semibold d-inline-flex align-items-center gap-1" style="background:#151515;border:1px solid #222;color:#E0E0E0"> |
| 23 | <span class="rounded-circle" style="width:6px;height:6px;background:#EAB308"> |
| 24 | </span> |
| 25 | Away |
| 26 | </span> |
| 27 | <span class="badge rounded-pill fw-semibold d-inline-flex align-items-center gap-1" style="background:#151515;border:1px solid #222;color:#E0E0E0"> |
| 28 | <span class="rounded-circle" style="width:6px;height:6px;background:#EF4444"> |
| 29 | </span> |
| 30 | Offline |
| 31 | </span> |
| 32 | </div> |
| 33 | <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center"> |
| 34 | <span class="badge rounded-pill fw-semibold" style="background:transparent;color:#00FF41;border:1px solid #00FF41"> |
| 35 | v2.4.1 |
| 36 | </span> |
| 37 | <span class="badge rounded-pill fw-semibold" style="background:transparent;color:#00FF41;border:1px solid #00FF41"> |
| 38 | Beta |
| 39 | </span> |
| 40 | <span class="badge rounded-pill fw-semibold" style="background:#00FF41;color:#0A0A0A"> |
| 41 | 99+ |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
Progress Bars
Progress bar variants, sizes, with labels, and animated.
progress
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="p-group"> |
| 3 | <span class="p-label"> |
| 4 | Storage |
| 5 | </span> |
| 6 | <div class="p-bar"> |
| 7 | <div class="p-fill" style="width:65%"> |
| 8 | </div> |
| 9 | </div> |
| 10 | <span class="p-val"> |
| 11 | 65% |
| 12 | </span> |
| 13 | </div> |
| 14 | <div class="p-group"> |
| 15 | <span class="p-label"> |
| 16 | CPU |
| 17 | </span> |
| 18 | <div class="p-bar green"> |
| 19 | <div class="p-fill" style="width:80%"> |
| 20 | </div> |
| 21 | </div> |
| 22 | <span class="p-val"> |
| 23 | 80% |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="p-group"> |
| 27 | <span class="p-label"> |
| 28 | Memory |
| 29 | </span> |
| 30 | <div class="p-bar sm"> |
| 31 | <div class="p-fill" style="width:45%"> |
| 32 | </div> |
| 33 | </div> |
| 34 | <span class="p-val"> |
| 35 | 45% |
| 36 | </span> |
| 37 | </div> |
| 38 | <div class="p-group"> |
| 39 | <span class="p-label"> |
| 40 | Network |
| 41 | </span> |
| 42 | <div class="p-bar"> |
| 43 | <div class="p-fill stripes" style="width:90%"> |
| 44 | </div> |
| 45 | </div> |
| 46 | <span class="p-val"> |
| 47 | 90% |
| 48 | </span> |
| 49 | </div> |
| 50 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:16px; |
| 16 | max-width:400px; |
| 17 | margin:16px auto |
| 18 | } |
| 19 | .p-group { |
| 20 | display:flex; |
| 21 | align-items:center; |
| 22 | gap:12px |
| 23 | } |
| 24 | .p-label { |
| 25 | font-size:11px; |
| 26 | color:#808080; |
| 27 | min-width:55px |
| 28 | } |
| 29 | .p-bar { |
| 30 | flex:1; |
| 31 | height:8px; |
| 32 | background:#1A1A2E; |
| 33 | border-radius:4px; |
| 34 | overflow:hidden; |
| 35 | border:1px solid #222 |
| 36 | } |
| 37 | .p-bar.sm { |
| 38 | height:4px; |
| 39 | border-radius:2px |
| 40 | } |
| 41 | .p-bar.green .p-fill { |
| 42 | background:#22C55E |
| 43 | } |
| 44 | .p-fill { |
| 45 | height:100%; |
| 46 | background:#00FF41; |
| 47 | border-radius:4px; |
| 48 | transition:width .5s ease |
| 49 | } |
| 50 | .p-fill.stripes { |
| 51 | background:repeating-linear-gradient(45deg, |
| 52 | #00FF41, |
| 53 | #00FF41 4px, |
| 54 | rgba(0, |
| 55 | 0, |
| 56 | 0, |
| 57 | .1) 4px, |
| 58 | rgba(0, |
| 59 | 0, |
| 60 | 0, |
| 61 | .1) 8px) |
| 62 | } |
| 63 | .p-val { |
| 64 | font-size:11px; |
| 65 | color:#A0A0A0; |
| 66 | font-weight:600; |
| 67 | min-width:32px; |
| 68 | text-align:right |
| 69 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-[400px] mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-3"> |
| 3 | <span class="text-[11px] text-[#808080] min-w-[55px]"> |
| 4 | Storage |
| 5 | </span> |
| 6 | <div class="flex-1 h-2 bg-[#1A1A2E] rounded overflow-hidden border border-[#222]"> |
| 7 | <div class="h-full bg-[#00FF41] rounded transition-all duration-500" style="width:65%"> |
| 8 | </div> |
| 9 | </div> |
| 10 | <span class="text-[11px] font-semibold text-[#A0A0A0] min-w-[32px] text-right"> |
| 11 | 65% |
| 12 | </span> |
| 13 | </div> |
| 14 | <div class="flex items-center gap-3"> |
| 15 | <span class="text-[11px] text-[#808080] min-w-[55px]"> |
| 16 | CPU |
| 17 | </span> |
| 18 | <div class="flex-1 h-2 bg-[#1A1A2E] rounded overflow-hidden border border-[#222]"> |
| 19 | <div class="h-full bg-[#22C55E] rounded transition-all duration-500" style="width:80%"> |
| 20 | </div> |
| 21 | </div> |
| 22 | <span class="text-[11px] font-semibold text-[#A0A0A0] min-w-[32px] text-right"> |
| 23 | 80% |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="flex items-center gap-3"> |
| 27 | <span class="text-[11px] text-[#808080] min-w-[55px]"> |
| 28 | Memory |
| 29 | </span> |
| 30 | <div class="flex-1 h-1 bg-[#1A1A2E] rounded overflow-hidden border border-[#222]"> |
| 31 | <div class="h-full bg-[#00FF41] rounded transition-all duration-500" style="width:45%"> |
| 32 | </div> |
| 33 | </div> |
| 34 | <span class="text-[11px] font-semibold text-[#A0A0A0] min-w-[32px] text-right"> |
| 35 | 45% |
| 36 | </span> |
| 37 | </div> |
| 38 | <div class="flex items-center gap-3"> |
| 39 | <span class="text-[11px] text-[#808080] min-w-[55px]"> |
| 40 | Network |
| 41 | </span> |
| 42 | <div class="flex-1 h-2 bg-[#1A1A2E] rounded overflow-hidden border border-[#222]"> |
| 43 | <div class="h-full rounded transition-all duration-500 bg-[repeating-linear-gradient(45deg,#00FF41,#00FF41_4px,rgba(0,0,0,0.1)_4px,rgba(0,0,0,0.1)_8px)]" style="width:90%"> |
| 44 | </div> |
| 45 | </div> |
| 46 | <span class="text-[11px] font-semibold text-[#A0A0A0] min-w-[32px] text-right"> |
| 47 | 90% |
| 48 | </span> |
| 49 | </div> |
| 50 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 mx-auto p-4" style="max-width:400px"> |
| 2 | <div class="d-flex align-items-center gap-3"> |
| 3 | <span class="text-secondary" style="font-size:11px;min-width:55px"> |
| 4 | Storage |
| 5 | </span> |
| 6 | <div class="flex-grow-1" style="height:8px;background:#1A1A2E;border-radius:4px;overflow:hidden;border:1px solid #222"> |
| 7 | <div style="height:100%;width:65%;background:#00FF41;border-radius:4px"> |
| 8 | </div> |
| 9 | </div> |
| 10 | <span class="fw-semibold text-secondary text-end" style="font-size:11px;min-width:32px"> |
| 11 | 65% |
| 12 | </span> |
| 13 | </div> |
| 14 | <div class="d-flex align-items-center gap-3"> |
| 15 | <span class="text-secondary" style="font-size:11px;min-width:55px"> |
| 16 | CPU |
| 17 | </span> |
| 18 | <div class="flex-grow-1" style="height:8px;background:#1A1A2E;border-radius:4px;overflow:hidden;border:1px solid #222"> |
| 19 | <div style="height:100%;width:80%;background:#22C55E;border-radius:4px"> |
| 20 | </div> |
| 21 | </div> |
| 22 | <span class="fw-semibold text-secondary text-end" style="font-size:11px;min-width:32px"> |
| 23 | 80% |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="d-flex align-items-center gap-3"> |
| 27 | <span class="text-secondary" style="font-size:11px;min-width:55px"> |
| 28 | Memory |
| 29 | </span> |
| 30 | <div class="flex-grow-1" style="height:4px;background:#1A1A2E;border-radius:2px;overflow:hidden;border:1px solid #222"> |
| 31 | <div style="height:100%;width:45%;background:#00FF41;border-radius:2px"> |
| 32 | </div> |
| 33 | </div> |
| 34 | <span class="fw-semibold text-secondary text-end" style="font-size:11px;min-width:32px"> |
| 35 | 45% |
| 36 | </span> |
| 37 | </div> |
| 38 | <div class="d-flex align-items-center gap-3"> |
| 39 | <span class="text-secondary" style="font-size:11px;min-width:55px"> |
| 40 | Network |
| 41 | </span> |
| 42 | <div class="flex-grow-1" style="height:8px;background:#1A1A2E;border-radius:4px;overflow:hidden;border:1px solid #222"> |
| 43 | <div style="height:100%;width:90%;background:repeating-linear-gradient(45deg,#00FF41,#00FF41 4px,rgba(0,0,0,.1) 4px,rgba(0,0,0,.1) 8px);border-radius:4px"> |
| 44 | </div> |
| 45 | </div> |
| 46 | <span class="fw-semibold text-secondary text-end" style="font-size:11px;min-width:32px"> |
| 47 | 90% |
| 48 | </span> |
| 49 | </div> |
| 50 | </div> |
Skeleton Loaders
Loading placeholders for text, cards, tables, and avatars.
skeleton
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="sk-card"> |
| 3 | <div class="sk-av"> |
| 4 | </div> |
| 5 | <div class="sk-body"> |
| 6 | <div class="sk-line w-60"> |
| 7 | </div> |
| 8 | <div class="sk-line w-80"> |
| 9 | </div> |
| 10 | <div class="sk-line w-40"> |
| 11 | </div> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="sk-card"> |
| 15 | <div class="sk-img"> |
| 16 | </div> |
| 17 | <div class="sk-body"> |
| 18 | <div class="sk-line w-70"> |
| 19 | </div> |
| 20 | <div class="sk-line w-90"> |
| 21 | </div> |
| 22 | <div class="sk-line w-50"> |
| 23 | </div> |
| 24 | <div class="sk-line w-30" style="margin-top:8px"> |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
| 28 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:16px; |
| 16 | max-width:360px; |
| 17 | margin:16px auto |
| 18 | } |
| 19 | @keyframes shimmer { |
| 20 | 0% { |
| 21 | background-position:-200px 0 |
| 22 | } |
| 23 | 100% { |
| 24 | background-position:calc(200px + 100%) 0 |
| 25 | } |
| 26 | } |
| 27 | .sk-card { |
| 28 | display:flex; |
| 29 | gap:12px; |
| 30 | padding:14px; |
| 31 | border-radius:8px; |
| 32 | border:1px solid #222; |
| 33 | background:#0F0F0F |
| 34 | } |
| 35 | .sk-av { |
| 36 | width:40px; |
| 37 | height:40px; |
| 38 | border-radius:50%; |
| 39 | background:linear-gradient(90deg, |
| 40 | #1A1A2E 25%, |
| 41 | #22223A 50%, |
| 42 | #1A1A2E 75%); |
| 43 | background-size:200px 100%; |
| 44 | animation:shimmer 1.5s infinite |
| 45 | } |
| 46 | .sk-img { |
| 47 | width:80px; |
| 48 | height:60px; |
| 49 | border-radius:6px; |
| 50 | background:linear-gradient(90deg, |
| 51 | #1A1A2E 25%, |
| 52 | #22223A 50%, |
| 53 | #1A1A2E 75%); |
| 54 | background-size:200px 100%; |
| 55 | animation:shimmer 1.5s infinite; |
| 56 | flex-shrink:0 |
| 57 | } |
| 58 | .sk-body { |
| 59 | flex:1; |
| 60 | display:flex; |
| 61 | flex-direction:column; |
| 62 | gap:8px |
| 63 | } |
| 64 | .sk-line { |
| 65 | height:10px; |
| 66 | border-radius:5px; |
| 67 | background:linear-gradient(90deg, |
| 68 | #1A1A2E 25%, |
| 69 | #22223A 50%, |
| 70 | #1A1A2E 75%); |
| 71 | background-size:200px 100%; |
| 72 | animation:shimmer 1.5s infinite |
| 73 | } |
| 74 | .w-30 { |
| 75 | width:30% |
| 76 | } |
| 77 | .w-40 { |
| 78 | width:40% |
| 79 | } |
| 80 | .w-50 { |
| 81 | width:50% |
| 82 | } |
| 83 | .w-60 { |
| 84 | width:60% |
| 85 | } |
| 86 | .w-70 { |
| 87 | width:70% |
| 88 | } |
| 89 | .w-80 { |
| 90 | width:80% |
| 91 | } |
| 92 | .w-90 { |
| 93 | width:90% |
| 94 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-[360px] mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <style> |
| 3 | @keyframes tw-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}} |
| 4 | </style> |
| 5 | <div class="flex gap-3 p-3.5 rounded-lg border border-[#222] bg-[#0F0F0F]"> |
| 6 | <div class="w-10 h-10 rounded-full shrink-0" style="background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 7 | </div> |
| 8 | <div class="flex-1 flex flex-col gap-2"> |
| 9 | <div class="h-2.5 rounded-[5px]" style="width:60%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 10 | </div> |
| 11 | <div class="h-2.5 rounded-[5px]" style="width:80%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 12 | </div> |
| 13 | <div class="h-2.5 rounded-[5px]" style="width:40%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="flex gap-3 p-3.5 rounded-lg border border-[#222] bg-[#0F0F0F]"> |
| 18 | <div class="w-20 h-[60px] rounded-md shrink-0" style="background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 19 | </div> |
| 20 | <div class="flex-1 flex flex-col gap-2"> |
| 21 | <div class="h-2.5 rounded-[5px]" style="width:70%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 22 | </div> |
| 23 | <div class="h-2.5 rounded-[5px]" style="width:90%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 24 | </div> |
| 25 | <div class="h-2.5 rounded-[5px]" style="width:50%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 26 | </div> |
| 27 | <div class="h-2.5 rounded-[5px] mt-2" style="width:30%;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:tw-shimmer 1.5s infinite"> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 mx-auto p-4" style="max-width:360px"> |
| 2 | <style> |
| 3 | @keyframes bs-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}} |
| 4 | </style> |
| 5 | <div class="d-flex gap-3 p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 6 | <div class="rounded-circle flex-shrink-0" style="width:40px;height:40px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 7 | </div> |
| 8 | <div class="flex-grow-1 d-flex flex-column gap-2"> |
| 9 | <div style="height:10px;width:60%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 10 | </div> |
| 11 | <div style="height:10px;width:80%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 12 | </div> |
| 13 | <div style="height:10px;width:40%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="d-flex gap-3 p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 18 | <div class="rounded flex-shrink-0" style="width:80px;height:60px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 19 | </div> |
| 20 | <div class="flex-grow-1 d-flex flex-column gap-2"> |
| 21 | <div style="height:10px;width:70%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 22 | </div> |
| 23 | <div style="height:10px;width:90%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 24 | </div> |
| 25 | <div style="height:10px;width:50%;border-radius:5px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 26 | </div> |
| 27 | <div style="height:10px;width:30%;border-radius:5px;margin-top:8px;background:linear-gradient(90deg,#1A1A2E 25%,#22223A 50%,#1A1A2E 75%);background-size:200px 100%;animation:bs-shimmer 1.5s infinite"> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
Stat Cards
Metric display cards with labels, values, and change indicators.
stats
Live
untitled.html
HTML
| 1 | <div class="grid"> |
| 2 | <div class="stat"> |
| 3 | <span class="stat-label"> |
| 4 | Revenue |
| 5 | </span> |
| 6 | <span class="stat-val"> |
| 7 | $12,430 |
| 8 | </span> |
| 9 | <span class="stat-chg up"> |
| 10 | ↑ 12.5% |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="stat"> |
| 14 | <span class="stat-label"> |
| 15 | Users |
| 16 | </span> |
| 17 | <span class="stat-val"> |
| 18 | 1,842 |
| 19 | </span> |
| 20 | <span class="stat-chg up"> |
| 21 | ↑ 8.2% |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="stat"> |
| 25 | <span class="stat-label"> |
| 26 | Bounce Rate |
| 27 | </span> |
| 28 | <span class="stat-val"> |
| 29 | 32.1% |
| 30 | </span> |
| 31 | <span class="stat-chg down"> |
| 32 | ↓ 2.4% |
| 33 | </span> |
| 34 | </div> |
| 35 | <div class="stat"> |
| 36 | <span class="stat-label"> |
| 37 | Avg. Session |
| 38 | </span> |
| 39 | <span class="stat-val"> |
| 40 | 4m 12s |
| 41 | </span> |
| 42 | <span class="stat-chg up"> |
| 43 | ↑ 6.1% |
| 44 | </span> |
| 45 | </div> |
| 46 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .grid { |
| 13 | display:grid; |
| 14 | grid-template-columns:1fr 1fr; |
| 15 | gap:12px; |
| 16 | max-width:420px; |
| 17 | margin:16px auto |
| 18 | } |
| 19 | .stat { |
| 20 | background:#0F0F0F; |
| 21 | border:1px solid #222; |
| 22 | border-radius:10px; |
| 23 | padding:16px |
| 24 | } |
| 25 | .stat-label { |
| 26 | display:block; |
| 27 | font-size:10px; |
| 28 | color:#808080; |
| 29 | text-transform:uppercase; |
| 30 | letter-spacing:1px; |
| 31 | margin-bottom:6px |
| 32 | } |
| 33 | .stat-val { |
| 34 | display:block; |
| 35 | font-size:22px; |
| 36 | font-weight:700; |
| 37 | color:#E0E0E0; |
| 38 | margin-bottom:4px |
| 39 | } |
| 40 | .stat-chg { |
| 41 | font-size:11px; |
| 42 | font-weight:600 |
| 43 | } |
| 44 | .up { |
| 45 | color:#22C55E |
| 46 | } |
| 47 | .down { |
| 48 | color:#EF4444 |
| 49 | } |
untitled.html
HTML
| 1 | <div class="grid grid-cols-2 gap-3 max-w-[420px] mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <div class="bg-[#0F0F0F] border border-[#222] rounded-[10px] p-4"> |
| 3 | <span class="block text-[10px] text-[#808080] uppercase tracking-wider mb-1.5"> |
| 4 | Revenue |
| 5 | </span> |
| 6 | <span class="block text-[22px] font-bold text-[#E0E0E0] mb-1"> |
| 7 | $12,430 |
| 8 | </span> |
| 9 | <span class="text-[11px] font-semibold text-[#22C55E]"> |
| 10 | ↑ 12.5% |
| 11 | </span> |
| 12 | </div> |
| 13 | <div class="bg-[#0F0F0F] border border-[#222] rounded-[10px] p-4"> |
| 14 | <span class="block text-[10px] text-[#808080] uppercase tracking-wider mb-1.5"> |
| 15 | Users |
| 16 | </span> |
| 17 | <span class="block text-[22px] font-bold text-[#E0E0E0] mb-1"> |
| 18 | 1,842 |
| 19 | </span> |
| 20 | <span class="text-[11px] font-semibold text-[#22C55E]"> |
| 21 | ↑ 8.2% |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="bg-[#0F0F0F] border border-[#222] rounded-[10px] p-4"> |
| 25 | <span class="block text-[10px] text-[#808080] uppercase tracking-wider mb-1.5"> |
| 26 | Bounce Rate |
| 27 | </span> |
| 28 | <span class="block text-[22px] font-bold text-[#E0E0E0] mb-1"> |
| 29 | 32.1% |
| 30 | </span> |
| 31 | <span class="text-[11px] font-semibold text-[#EF4444]"> |
| 32 | ↓ 2.4% |
| 33 | </span> |
| 34 | </div> |
| 35 | <div class="bg-[#0F0F0F] border border-[#222] rounded-[10px] p-4"> |
| 36 | <span class="block text-[10px] text-[#808080] uppercase tracking-wider mb-1.5"> |
| 37 | Avg. Session |
| 38 | </span> |
| 39 | <span class="block text-[22px] font-bold text-[#E0E0E0] mb-1"> |
| 40 | 4m 12s |
| 41 | </span> |
| 42 | <span class="text-[11px] font-semibold text-[#22C55E]"> |
| 43 | ↑ 6.1% |
| 44 | </span> |
| 45 | </div> |
| 46 | </div> |
untitled.html
HTML
| 1 | <div class="row row-cols-2 g-3 mx-auto" style="max-width:420px"> |
| 2 | <div class="col"> |
| 3 | <div class="p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 4 | <span class="d-block text-uppercase" style="font-size:10px;color:#808080;letter-spacing:1px"> |
| 5 | Revenue |
| 6 | </span> |
| 7 | <span class="d-block fw-bold" style="font-size:22px;color:#E0E0E0"> |
| 8 | $12,430 |
| 9 | </span> |
| 10 | <span class="fw-semibold" style="font-size:11px;color:#22C55E"> |
| 11 | ↑ 12.5% |
| 12 | </span> |
| 13 | </div> |
| 14 | </div> |
| 15 | <div class="col"> |
| 16 | <div class="p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 17 | <span class="d-block text-uppercase" style="font-size:10px;color:#808080;letter-spacing:1px"> |
| 18 | Users |
| 19 | </span> |
| 20 | <span class="d-block fw-bold" style="font-size:22px;color:#E0E0E0"> |
| 21 | 1,842 |
| 22 | </span> |
| 23 | <span class="fw-semibold" style="font-size:11px;color:#22C55E"> |
| 24 | ↑ 8.2% |
| 25 | </span> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="col"> |
| 29 | <div class="p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 30 | <span class="d-block text-uppercase" style="font-size:10px;color:#808080;letter-spacing:1px"> |
| 31 | Bounce Rate |
| 32 | </span> |
| 33 | <span class="d-block fw-bold" style="font-size:22px;color:#E0E0E0"> |
| 34 | 32.1% |
| 35 | </span> |
| 36 | <span class="fw-semibold" style="font-size:11px;color:#EF4444"> |
| 37 | ↓ 2.4% |
| 38 | </span> |
| 39 | </div> |
| 40 | </div> |
| 41 | <div class="col"> |
| 42 | <div class="p-3 rounded border border-secondary" style="background:#0F0F0F"> |
| 43 | <span class="d-block text-uppercase" style="font-size:10px;color:#808080;letter-spacing:1px"> |
| 44 | Avg. Session |
| 45 | </span> |
| 46 | <span class="d-block fw-bold" style="font-size:22px;color:#E0E0E0"> |
| 47 | 4m 12s |
| 48 | </span> |
| 49 | <span class="fw-semibold" style="font-size:11px;color:#22C55E"> |
| 50 | ↑ 6.1% |
| 51 | </span> |
| 52 | </div> |
| 53 | </div> |
| 54 | </div> |
Table
Clean data table with header, rows, sortable columns, and hover states.
table
Live
untitled.html
HTML
| 1 | <table class="table"> |
| 2 | <thead> |
| 3 | <tr> |
| 4 | <th data-sort> |
| 5 | Name |
| 6 | </th> |
| 7 | <th data-sort> |
| 8 | Role |
| 9 | </th> |
| 10 | <th data-sort> |
| 11 | Status |
| 12 | </th> |
| 13 | <th style="text-align:right"> |
| 14 | Actions |
| 15 | </th> |
| 16 | </tr> |
| 17 | </thead> |
| 18 | <tbody> |
| 19 | <tr> |
| 20 | <td> |
| 21 | John Doe |
| 22 | </td> |
| 23 | <td> |
| 24 | Developer |
| 25 | </td> |
| 26 | <td> |
| 27 | <span class="t-badge active"> |
| 28 | Active |
| 29 | </span> |
| 30 | </td> |
| 31 | <td style="text-align:right"> |
| 32 | <button class="t-btn"> |
| 33 | Edit |
| 34 | </button> |
| 35 | </td> |
| 36 | </tr> |
| 37 | <tr> |
| 38 | <td> |
| 39 | Jane Smith |
| 40 | </td> |
| 41 | <td> |
| 42 | Designer |
| 43 | </td> |
| 44 | <td> |
| 45 | <span class="t-badge away"> |
| 46 | Away |
| 47 | </span> |
| 48 | </td> |
| 49 | <td style="text-align:right"> |
| 50 | <button class="t-btn"> |
| 51 | Edit |
| 52 | </button> |
| 53 | </td> |
| 54 | </tr> |
| 55 | <tr> |
| 56 | <td> |
| 57 | Sam Wilson |
| 58 | </td> |
| 59 | <td> |
| 60 | Manager |
| 61 | </td> |
| 62 | <td> |
| 63 | <span class="t-badge off"> |
| 64 | Offline |
| 65 | </span> |
| 66 | </td> |
| 67 | <td style="text-align:right"> |
| 68 | <button class="t-btn"> |
| 69 | Edit |
| 70 | </button> |
| 71 | </td> |
| 72 | </tr> |
| 73 | <tr> |
| 74 | <td> |
| 75 | Lisa Ray |
| 76 | </td> |
| 77 | <td> |
| 78 | Developer |
| 79 | </td> |
| 80 | <td> |
| 81 | <span class="t-badge active"> |
| 82 | Active |
| 83 | </span> |
| 84 | </td> |
| 85 | <td style="text-align:right"> |
| 86 | <button class="t-btn"> |
| 87 | Edit |
| 88 | </button> |
| 89 | </td> |
| 90 | </tr> |
| 91 | </tbody> |
| 92 | </table> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .table { |
| 13 | width:100%; |
| 14 | max-width:500px; |
| 15 | margin:16px auto; |
| 16 | border-collapse:collapse; |
| 17 | font-size:12px |
| 18 | } |
| 19 | .table th { |
| 20 | padding:10px 14px; |
| 21 | text-align:left; |
| 22 | font-size:10px; |
| 23 | font-weight:600; |
| 24 | color:#525252; |
| 25 | text-transform:uppercase; |
| 26 | letter-spacing:1px; |
| 27 | border-bottom:1px solid #222; |
| 28 | user-select:none |
| 29 | } |
| 30 | .table th[data-sort] { |
| 31 | cursor:pointer |
| 32 | } |
| 33 | .table th[data-sort]:hover { |
| 34 | color:#808080 |
| 35 | } |
| 36 | .table th[data-sort]::after { |
| 37 | content:'⇅'; |
| 38 | font-size:9px; |
| 39 | margin-left:6px; |
| 40 | opacity:.2; |
| 41 | display:inline-block |
| 42 | } |
| 43 | .table th.asc::after { |
| 44 | content:'↑'; |
| 45 | opacity:1; |
| 46 | color:#00FF41 |
| 47 | } |
| 48 | .table th.desc::after { |
| 49 | content:'↓'; |
| 50 | opacity:1; |
| 51 | color:#00FF41 |
| 52 | } |
| 53 | .table td { |
| 54 | padding:10px 14px; |
| 55 | color:#A0A0A0; |
| 56 | border-bottom:1px solid #1A1A1A |
| 57 | } |
| 58 | .table tbody tr:hover td { |
| 59 | background:rgba(255, |
| 60 | 255, |
| 61 | 255, |
| 62 | .02); |
| 63 | color:#E0E0E0 |
| 64 | } |
| 65 | .t-badge { |
| 66 | padding:2px 8px; |
| 67 | border-radius:999px; |
| 68 | font-size:10px; |
| 69 | font-weight:600 |
| 70 | } |
| 71 | .active { |
| 72 | background:rgba(34, |
| 73 | 197, |
| 74 | 94, |
| 75 | .12); |
| 76 | color:#22C55E |
| 77 | } |
| 78 | .away { |
| 79 | background:rgba(234, |
| 80 | 179, |
| 81 | 8, |
| 82 | .12); |
| 83 | color:#EAB308 |
| 84 | } |
| 85 | .off { |
| 86 | background:rgba(160, |
| 87 | 160, |
| 88 | 160, |
| 89 | .12); |
| 90 | color:#808080 |
| 91 | } |
| 92 | .t-btn { |
| 93 | padding:4px 12px; |
| 94 | border-radius:4px; |
| 95 | font-size:10px; |
| 96 | font-weight:500; |
| 97 | border:1px solid #2A2A3E; |
| 98 | background:transparent; |
| 99 | color:#808080; |
| 100 | cursor:pointer; |
| 101 | transition:all .2s; |
| 102 | font-family:inherit |
| 103 | } |
| 104 | .t-btn:hover { |
| 105 | background:#1A1A2E; |
| 106 | color:#E0E0E0 |
| 107 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('th[data-sort]').forEach(th=>{th.addEventListener('click',()=>{const i=Array.from(th.parentElement.children).indexOf(th);const tbody=th.closest('table').querySelector('tbody');const rows=Array.from(tbody.querySelectorAll('tr'));const asc=th.classList.contains('asc')?false:!th.classList.contains('desc');rows.sort((a,b)=>{const va=a.children[i].textContent.trim().toLowerCase();const vb=b.children[i].textContent.trim().toLowerCase();return asc?va.localeCompare(vb):vb.localeCompare(va)});rows.forEach(r=>tbody.appendChild(r));document.querySelectorAll('th[data-sort]').forEach(h=>{h.classList.toggle('asc',h===th&&asc);h.classList.toggle('desc',h===th&&!asc)})})}) |
untitled.html
HTML
| 1 | <div class="p-4 bg-[#0A0A0A]"> |
| 2 | <table class="w-full max-w-[500px] mx-auto border-collapse text-xs"> |
| 3 | <thead> |
| 4 | <tr> |
| 5 | <th class="px-3.5 py-2.5 text-left text-[10px] font-semibold text-[#525252] uppercase tracking-wider border-b border-[#222] cursor-pointer select-none hover:text-[#808080]" data-sort> |
| 6 | Name |
| 7 | </th> |
| 8 | <th class="px-3.5 py-2.5 text-left text-[10px] font-semibold text-[#525252] uppercase tracking-wider border-b border-[#222] cursor-pointer select-none hover:text-[#808080]" data-sort> |
| 9 | Role |
| 10 | </th> |
| 11 | <th class="px-3.5 py-2.5 text-left text-[10px] font-semibold text-[#525252] uppercase tracking-wider border-b border-[#222] cursor-pointer select-none hover:text-[#808080]" data-sort> |
| 12 | Status |
| 13 | </th> |
| 14 | <th class="px-3.5 py-2.5 text-right text-[10px] font-semibold text-[#525252] uppercase tracking-wider border-b border-[#222]"> |
| 15 | Actions |
| 16 | </th> |
| 17 | </tr> |
| 18 | </thead> |
| 19 | <tbody> |
| 20 | <tr class="group hover:bg-white/[0.02]"> |
| 21 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 22 | John Doe |
| 23 | </td> |
| 24 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 25 | Developer |
| 26 | </td> |
| 27 | <td class="px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 28 | <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(34,197,94,0.12)] text-[#22C55E]"> |
| 29 | Active |
| 30 | </span> |
| 31 | </td> |
| 32 | <td class="px-3.5 py-2.5 text-right border-b border-[#1A1A1A]"> |
| 33 | <button class="px-3 py-1 rounded text-[10px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 34 | Edit |
| 35 | </button> |
| 36 | </td> |
| 37 | </tr> |
| 38 | <tr class="group hover:bg-white/[0.02]"> |
| 39 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 40 | Jane Smith |
| 41 | </td> |
| 42 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 43 | Designer |
| 44 | </td> |
| 45 | <td class="px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 46 | <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(234,179,8,0.12)] text-[#EAB308]"> |
| 47 | Away |
| 48 | </span> |
| 49 | </td> |
| 50 | <td class="px-3.5 py-2.5 text-right border-b border-[#1A1A1A]"> |
| 51 | <button class="px-3 py-1 rounded text-[10px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 52 | Edit |
| 53 | </button> |
| 54 | </td> |
| 55 | </tr> |
| 56 | <tr class="group hover:bg-white/[0.02]"> |
| 57 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 58 | Sam Wilson |
| 59 | </td> |
| 60 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 61 | Manager |
| 62 | </td> |
| 63 | <td class="px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 64 | <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(160,160,160,0.12)] text-[#808080]"> |
| 65 | Offline |
| 66 | </span> |
| 67 | </td> |
| 68 | <td class="px-3.5 py-2.5 text-right border-b border-[#1A1A1A]"> |
| 69 | <button class="px-3 py-1 rounded text-[10px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 70 | Edit |
| 71 | </button> |
| 72 | </td> |
| 73 | </tr> |
| 74 | <tr class="group hover:bg-white/[0.02]"> |
| 75 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 76 | Lisa Ray |
| 77 | </td> |
| 78 | <td class="px-3.5 py-2.5 text-[#A0A0A0] group-hover:text-[#E0E0E0] border-b border-[#1A1A1A]"> |
| 79 | Developer |
| 80 | </td> |
| 81 | <td class="px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 82 | <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(34,197,94,0.12)] text-[#22C55E]"> |
| 83 | Active |
| 84 | </span> |
| 85 | </td> |
| 86 | <td class="px-3.5 py-2.5 text-right border-b border-[#1A1A1A]"> |
| 87 | <button class="px-3 py-1 rounded text-[10px] font-medium border border-[#2A2A3E] bg-transparent text-[#808080] hover:bg-[#1A1A2E] hover:text-[#E0E0E0] transition-colors"> |
| 88 | Edit |
| 89 | </button> |
| 90 | </td> |
| 91 | </tr> |
| 92 | </tbody> |
| 93 | </table> |
| 94 | </div> |
untitled.html
HTML
| 1 | <div class="p-4 bg-[#0A0A0A]"> |
| 2 | <table class="table table-dark" style="max-width:500px;margin:0 auto;font-size:12px;--bs-table-bg:#0A0A0A;--bs-table-color:#A0A0A0;--bs-table-border-color:#1A1A1A"> |
| 3 | <thead> |
| 4 | <tr> |
| 5 | <th scope="col" class="text-uppercase" style="font-size:10px;color:#525252;letter-spacing:1px;border-bottom:1px solid #222;cursor:pointer" data-sort> |
| 6 | Name |
| 7 | </th> |
| 8 | <th scope="col" class="text-uppercase" style="font-size:10px;color:#525252;letter-spacing:1px;border-bottom:1px solid #222;cursor:pointer" data-sort> |
| 9 | Role |
| 10 | </th> |
| 11 | <th scope="col" class="text-uppercase" style="font-size:10px;color:#525252;letter-spacing:1px;border-bottom:1px solid #222;cursor:pointer" data-sort> |
| 12 | Status |
| 13 | </th> |
| 14 | <th scope="col" class="text-end text-uppercase" style="font-size:10px;color:#525252;letter-spacing:1px;border-bottom:1px solid #222"> |
| 15 | Actions |
| 16 | </th> |
| 17 | </tr> |
| 18 | </thead> |
| 19 | <tbody> |
| 20 | <tr> |
| 21 | <td> |
| 22 | John Doe |
| 23 | </td> |
| 24 | <td> |
| 25 | Developer |
| 26 | </td> |
| 27 | <td> |
| 28 | <span class="badge rounded-pill fw-semibold" style="background:rgba(34,197,94,.12);color:#22C55E;font-size:10px"> |
| 29 | Active |
| 30 | </span> |
| 31 | </td> |
| 32 | <td class="text-end"> |
| 33 | <button class="btn btn-sm btn-outline-secondary" style="font-size:10px;padding:4px 12px;border-color:#2A2A3E;color:#808080"> |
| 34 | Edit |
| 35 | </button> |
| 36 | </td> |
| 37 | </tr> |
| 38 | <tr> |
| 39 | <td> |
| 40 | Jane Smith |
| 41 | </td> |
| 42 | <td> |
| 43 | Designer |
| 44 | </td> |
| 45 | <td> |
| 46 | <span class="badge rounded-pill fw-semibold" style="background:rgba(234,179,8,.12);color:#EAB308;font-size:10px"> |
| 47 | Away |
| 48 | </span> |
| 49 | </td> |
| 50 | <td class="text-end"> |
| 51 | <button class="btn btn-sm btn-outline-secondary" style="font-size:10px;padding:4px 12px;border-color:#2A2A3E;color:#808080"> |
| 52 | Edit |
| 53 | </button> |
| 54 | </td> |
| 55 | </tr> |
| 56 | <tr> |
| 57 | <td> |
| 58 | Sam Wilson |
| 59 | </td> |
| 60 | <td> |
| 61 | Manager |
| 62 | </td> |
| 63 | <td> |
| 64 | <span class="badge rounded-pill fw-semibold" style="background:rgba(160,160,160,.12);color:#808080;font-size:10px"> |
| 65 | Offline |
| 66 | </span> |
| 67 | </td> |
| 68 | <td class="text-end"> |
| 69 | <button class="btn btn-sm btn-outline-secondary" style="font-size:10px;padding:4px 12px;border-color:#2A2A3E;color:#808080"> |
| 70 | Edit |
| 71 | </button> |
| 72 | </td> |
| 73 | </tr> |
| 74 | <tr> |
| 75 | <td> |
| 76 | Lisa Ray |
| 77 | </td> |
| 78 | <td> |
| 79 | Developer |
| 80 | </td> |
| 81 | <td> |
| 82 | <span class="badge rounded-pill fw-semibold" style="background:rgba(34,197,94,.12);color:#22C55E;font-size:10px"> |
| 83 | Active |
| 84 | </span> |
| 85 | </td> |
| 86 | <td class="text-end"> |
| 87 | <button class="btn btn-sm btn-outline-secondary" style="font-size:10px;padding:4px 12px;border-color:#2A2A3E;color:#808080"> |
| 88 | Edit |
| 89 | </button> |
| 90 | </td> |
| 91 | </tr> |
| 92 | </tbody> |
| 93 | </table> |
| 94 | </div> |
Timeline
Vertical timeline with events, dates, and status indicators.
timeline
Live
untitled.html
HTML
| 1 | <div class="tl"> |
| 2 | <div class="tl-item"> |
| 3 | <div class="tl-dot done"> |
| 4 | </div> |
| 5 | <div class="tl-content"> |
| 6 | <div class="tl-date"> |
| 7 | 2 min ago |
| 8 | </div> |
| 9 | <div class="tl-title"> |
| 10 | Deployed v2.4.1 |
| 11 | </div> |
| 12 | <div class="tl-desc"> |
| 13 | Production release with bug fixes and performance improvements. |
| 14 | </div> |
| 15 | </div> |
| 16 | </div> |
| 17 | <div class="tl-item"> |
| 18 | <div class="tl-dot done"> |
| 19 | </div> |
| 20 | <div class="tl-content"> |
| 21 | <div class="tl-date"> |
| 22 | 1 hour ago |
| 23 | </div> |
| 24 | <div class="tl-title"> |
| 25 | Code Review Approved |
| 26 | </div> |
| 27 | <div class="tl-desc"> |
| 28 | PR #342 merged to main branch. |
| 29 | </div> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="tl-item"> |
| 33 | <div class="tl-dot current"> |
| 34 | </div> |
| 35 | <div class="tl-content"> |
| 36 | <div class="tl-date"> |
| 37 | In progress |
| 38 | </div> |
| 39 | <div class="tl-title"> |
| 40 | Database Migration |
| 41 | </div> |
| 42 | <div class="tl-desc"> |
| 43 | Migrating user data to new schema. |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | <div class="tl-item"> |
| 48 | <div class="tl-dot"> |
| 49 | </div> |
| 50 | <div class="tl-content"> |
| 51 | <div class="tl-date"> |
| 52 | Next |
| 53 | </div> |
| 54 | <div class="tl-title"> |
| 55 | Load Testing |
| 56 | </div> |
| 57 | <div class="tl-desc"> |
| 58 | Scheduled for next sprint. |
| 59 | </div> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .tl { |
| 13 | max-width:400px; |
| 14 | margin:16px auto; |
| 15 | padding:8px 0 |
| 16 | } |
| 17 | .tl-item { |
| 18 | display:flex; |
| 19 | gap:16px; |
| 20 | padding-bottom:24px; |
| 21 | position:relative |
| 22 | } |
| 23 | .tl-item:last-child { |
| 24 | padding-bottom:0 |
| 25 | } |
| 26 | .tl-dot { |
| 27 | width:14px; |
| 28 | height:14px; |
| 29 | border-radius:50%; |
| 30 | background:#333; |
| 31 | border:3px solid #0A0A0A; |
| 32 | flex-shrink:0; |
| 33 | margin-top:3px; |
| 34 | position:relative; |
| 35 | z-index:1 |
| 36 | } |
| 37 | .tl-dot.done { |
| 38 | background:#00FF41 |
| 39 | } |
| 40 | .tl-dot.current { |
| 41 | background:#00FF41; |
| 42 | box-shadow:0 0 0 4px rgba(0, |
| 43 | 255, |
| 44 | 65, |
| 45 | .2) |
| 46 | } |
| 47 | .tl-item:not(:last-child)::after { |
| 48 | content:''; |
| 49 | position:absolute; |
| 50 | left:6px; |
| 51 | top:20px; |
| 52 | bottom:0; |
| 53 | width:2px; |
| 54 | background:#222 |
| 55 | } |
| 56 | .tl-date { |
| 57 | font-size:10px; |
| 58 | color:#525252; |
| 59 | margin-bottom:2px |
| 60 | } |
| 61 | .tl-title { |
| 62 | font-size:13px; |
| 63 | color:#E0E0E0; |
| 64 | font-weight:600; |
| 65 | margin-bottom:2px |
| 66 | } |
| 67 | .tl-desc { |
| 68 | font-size:11px; |
| 69 | color:#808080; |
| 70 | line-height:1.4 |
| 71 | } |
untitled.html
HTML
| 1 | <div class="max-w-[400px] mx-auto py-2 px-4 bg-[#0A0A0A]"> |
| 2 | <div class="flex gap-4 pb-6 relative"> |
| 3 | <div class="w-3.5 h-3.5 rounded-full bg-[#00FF41] border-[3px] border-[#0A0A0A] shrink-0 mt-0.5 z-10"> |
| 4 | </div> |
| 5 | <div class="flex-1"> |
| 6 | <div class="text-[10px] text-[#525252] mb-0.5"> |
| 7 | 2 min ago |
| 8 | </div> |
| 9 | <div class="text-[13px] font-semibold text-[#E0E0E0] mb-0.5"> |
| 10 | Deployed v2.4.1 |
| 11 | </div> |
| 12 | <div class="text-[11px] text-[#808080] leading-snug"> |
| 13 | Production release with bug fixes and performance improvements. |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="absolute left-[6px] top-5 bottom-0 w-0.5 bg-[#222]"> |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="flex gap-4 pb-6 relative"> |
| 20 | <div class="w-3.5 h-3.5 rounded-full bg-[#00FF41] border-[3px] border-[#0A0A0A] shrink-0 mt-0.5 z-10"> |
| 21 | </div> |
| 22 | <div class="flex-1"> |
| 23 | <div class="text-[10px] text-[#525252] mb-0.5"> |
| 24 | 1 hour ago |
| 25 | </div> |
| 26 | <div class="text-[13px] font-semibold text-[#E0E0E0] mb-0.5"> |
| 27 | Code Review Approved |
| 28 | </div> |
| 29 | <div class="text-[11px] text-[#808080] leading-snug"> |
| 30 | PR #342 merged to main branch. |
| 31 | </div> |
| 32 | </div> |
| 33 | <div class="absolute left-[6px] top-5 bottom-0 w-0.5 bg-[#222]"> |
| 34 | </div> |
| 35 | </div> |
| 36 | <div class="flex gap-4 pb-6 relative"> |
| 37 | <div class="w-3.5 h-3.5 rounded-full bg-[#00FF41] border-[3px] border-[#0A0A0A] shrink-0 mt-0.5 z-10 shadow-[0_0_0_4px_rgba(0,255,65,0.2)]"> |
| 38 | </div> |
| 39 | <div class="flex-1"> |
| 40 | <div class="text-[10px] text-[#525252] mb-0.5"> |
| 41 | In progress |
| 42 | </div> |
| 43 | <div class="text-[13px] font-semibold text-[#E0E0E0] mb-0.5"> |
| 44 | Database Migration |
| 45 | </div> |
| 46 | <div class="text-[11px] text-[#808080] leading-snug"> |
| 47 | Migrating user data to new schema. |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="absolute left-[6px] top-5 bottom-0 w-0.5 bg-[#222]"> |
| 51 | </div> |
| 52 | </div> |
| 53 | <div class="flex gap-4 relative"> |
| 54 | <div class="w-3.5 h-3.5 rounded-full bg-[#333] border-[3px] border-[#0A0A0A] shrink-0 mt-0.5 z-10"> |
| 55 | </div> |
| 56 | <div class="flex-1"> |
| 57 | <div class="text-[10px] text-[#525252] mb-0.5"> |
| 58 | Next |
| 59 | </div> |
| 60 | <div class="text-[13px] font-semibold text-[#E0E0E0] mb-0.5"> |
| 61 | Load Testing |
| 62 | </div> |
| 63 | <div class="text-[11px] text-[#808080] leading-snug"> |
| 64 | Scheduled for next sprint. |
| 65 | </div> |
| 66 | </div> |
| 67 | </div> |
| 68 | </div> |
untitled.html
HTML
| 1 | <div class="mx-auto py-2 px-4" style="max-width:400px"> |
| 2 | <div class="d-flex gap-4 pb-4 position-relative"> |
| 3 | <div class="rounded-circle flex-shrink-0 mt-1 position-relative z-1" style="width:14px;height:14px;background:#00FF41;border:3px solid #0A0A0A"> |
| 4 | </div> |
| 5 | <div class="flex-grow-1"> |
| 6 | <div style="font-size:10px;color:#525252"> |
| 7 | 2 min ago |
| 8 | </div> |
| 9 | <div class="fw-semibold" style="font-size:13px;color:#E0E0E0"> |
| 10 | Deployed v2.4.1 |
| 11 | </div> |
| 12 | <div style="font-size:11px;color:#808080;line-height:1.4"> |
| 13 | Production release with bug fixes and performance improvements. |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="position-absolute" style="left:6px;top:20px;bottom:0;width:2px;background:#222"> |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="d-flex gap-4 pb-4 position-relative"> |
| 20 | <div class="rounded-circle flex-shrink-0 mt-1 position-relative z-1" style="width:14px;height:14px;background:#00FF41;border:3px solid #0A0A0A"> |
| 21 | </div> |
| 22 | <div class="flex-grow-1"> |
| 23 | <div style="font-size:10px;color:#525252"> |
| 24 | 1 hour ago |
| 25 | </div> |
| 26 | <div class="fw-semibold" style="font-size:13px;color:#E0E0E0"> |
| 27 | Code Review Approved |
| 28 | </div> |
| 29 | <div style="font-size:11px;color:#808080;line-height:1.4"> |
| 30 | PR #342 merged to main branch. |
| 31 | </div> |
| 32 | </div> |
| 33 | <div class="position-absolute" style="left:6px;top:20px;bottom:0;width:2px;background:#222"> |
| 34 | </div> |
| 35 | </div> |
| 36 | <div class="d-flex gap-4 pb-4 position-relative"> |
| 37 | <div class="rounded-circle flex-shrink-0 mt-1 position-relative z-1" style="width:14px;height:14px;background:#00FF41;border:3px solid #0A0A0A;box-shadow:0 0 0 4px rgba(0,255,65,.2)"> |
| 38 | </div> |
| 39 | <div class="flex-grow-1"> |
| 40 | <div style="font-size:10px;color:#525252"> |
| 41 | In progress |
| 42 | </div> |
| 43 | <div class="fw-semibold" style="font-size:13px;color:#E0E0E0"> |
| 44 | Database Migration |
| 45 | </div> |
| 46 | <div style="font-size:11px;color:#808080;line-height:1.4"> |
| 47 | Migrating user data to new schema. |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="position-absolute" style="left:6px;top:20px;bottom:0;width:2px;background:#222"> |
| 51 | </div> |
| 52 | </div> |
| 53 | <div class="d-flex gap-4 position-relative"> |
| 54 | <div class="rounded-circle flex-shrink-0 mt-1 position-relative z-1" style="width:14px;height:14px;background:#333;border:3px solid #0A0A0A"> |
| 55 | </div> |
| 56 | <div class="flex-grow-1"> |
| 57 | <div style="font-size:10px;color:#525252"> |
| 58 | Next |
| 59 | </div> |
| 60 | <div class="fw-semibold" style="font-size:13px;color:#E0E0E0"> |
| 61 | Load Testing |
| 62 | </div> |
| 63 | <div style="font-size:11px;color:#808080;line-height:1.4"> |
| 64 | Scheduled for next sprint. |
| 65 | </div> |
| 66 | </div> |
| 67 | </div> |
| 68 | </div> |
Description Lists
Key-value pairs for metadata, settings, and detail views.
description-lists
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <dl class="dl stacked"> |
| 3 | <div class="dl-row"> |
| 4 | <dt> |
| 5 | Plan |
| 6 | </dt> |
| 7 | <dd> |
| 8 | Pro |
| 9 | </dd> |
| 10 | </div> |
| 11 | <div class="dl-row"> |
| 12 | <dt> |
| 13 | Region |
| 14 | </dt> |
| 15 | <dd> |
| 16 | us-east-1 |
| 17 | </dd> |
| 18 | </div> |
| 19 | <div class="dl-row"> |
| 20 | <dt> |
| 21 | Last deploy |
| 22 | </dt> |
| 23 | <dd> |
| 24 | 2 min ago |
| 25 | </dd> |
| 26 | </div> |
| 27 | <div class="dl-row"> |
| 28 | <dt> |
| 29 | Build ID |
| 30 | </dt> |
| 31 | <dd> |
| 32 | <code class="code"> |
| 33 | a1b2c3d |
| 34 | </code> |
| 35 | </dd> |
| 36 | </div> |
| 37 | </dl> |
| 38 | <dl class="dl inline"> |
| 39 | <div class="dl-row"> |
| 40 | <dt> |
| 41 | Status |
| 42 | </dt> |
| 43 | <dd> |
| 44 | <span class="status"> |
| 45 | Healthy |
| 46 | </span> |
| 47 | </dd> |
| 48 | </div> |
| 49 | <div class="dl-row"> |
| 50 | <dt> |
| 51 | Uptime |
| 52 | </dt> |
| 53 | <dd> |
| 54 | 99.99% |
| 55 | </dd> |
| 56 | </div> |
| 57 | <div class="dl-row"> |
| 58 | <dt> |
| 59 | Latency |
| 60 | </dt> |
| 61 | <dd> |
| 62 | 42ms |
| 63 | </dd> |
| 64 | </div> |
| 65 | </dl> |
| 66 | </div> |
untitled.css
CSS
| 1 | * { |
| 2 | margin:0; |
| 3 | padding:0; |
| 4 | box-sizing:border-box |
| 5 | } |
| 6 | body { |
| 7 | font-family:system-ui, |
| 8 | sans-serif; |
| 9 | background:#0A0A0A; |
| 10 | padding:24px |
| 11 | } |
| 12 | .wrap { |
| 13 | display:flex; |
| 14 | flex-direction:column; |
| 15 | gap:16px; |
| 16 | max-width:420px; |
| 17 | margin:16px auto |
| 18 | } |
| 19 | .dl { |
| 20 | width:100%; |
| 21 | background:#0F0F0F; |
| 22 | border:1px solid #222; |
| 23 | border-radius:8px; |
| 24 | overflow:hidden |
| 25 | } |
| 26 | .dl-row { |
| 27 | display:flex; |
| 28 | justify-content:space-between; |
| 29 | align-items:center; |
| 30 | padding:10px 14px; |
| 31 | border-bottom:1px solid #1A1A1A |
| 32 | } |
| 33 | .dl-row:last-child { |
| 34 | border-bottom:none |
| 35 | } |
| 36 | .dl dt { |
| 37 | font-size:11px; |
| 38 | color:#808080 |
| 39 | } |
| 40 | .dl dd { |
| 41 | font-size:12px; |
| 42 | color:#E0E0E0; |
| 43 | font-weight:500 |
| 44 | } |
| 45 | .dl.inline .dl-row { |
| 46 | display:flex; |
| 47 | gap:16px; |
| 48 | justify-content:flex-start |
| 49 | } |
| 50 | .dl.inline dt { |
| 51 | min-width:80px |
| 52 | } |
| 53 | .code { |
| 54 | font-family:ui-monospace, |
| 55 | SFMono-Regular, |
| 56 | Menlo, |
| 57 | monospace; |
| 58 | background:#1A1A2E; |
| 59 | color:#00FF41; |
| 60 | padding:2px 6px; |
| 61 | border-radius:4px; |
| 62 | font-size:11px |
| 63 | } |
| 64 | .status { |
| 65 | display:inline-flex; |
| 66 | padding:2px 8px; |
| 67 | border-radius:999px; |
| 68 | font-size:10px; |
| 69 | font-weight:600; |
| 70 | background:rgba(34, |
| 71 | 197, |
| 72 | 94, |
| 73 | .12); |
| 74 | color:#22C55E |
| 75 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-4 max-w-[420px] mx-auto p-4 bg-[#0A0A0A]"> |
| 2 | <dl class="w-full bg-[#0F0F0F] border border-[#222] rounded-lg overflow-hidden"> |
| 3 | <div class="flex justify-between items-center px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 4 | <dt class="text-[11px] text-[#808080]"> |
| 5 | Plan |
| 6 | </dt> |
| 7 | <dd class="text-xs font-medium text-[#E0E0E0]"> |
| 8 | Pro |
| 9 | </dd> |
| 10 | </div> |
| 11 | <div class="flex justify-between items-center px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 12 | <dt class="text-[11px] text-[#808080]"> |
| 13 | Region |
| 14 | </dt> |
| 15 | <dd class="text-xs font-medium text-[#E0E0E0]"> |
| 16 | us-east-1 |
| 17 | </dd> |
| 18 | </div> |
| 19 | <div class="flex justify-between items-center px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 20 | <dt class="text-[11px] text-[#808080]"> |
| 21 | Last deploy |
| 22 | </dt> |
| 23 | <dd class="text-xs font-medium text-[#E0E0E0]"> |
| 24 | 2 min ago |
| 25 | </dd> |
| 26 | </div> |
| 27 | <div class="flex justify-between items-center px-3.5 py-2.5"> |
| 28 | <dt class="text-[11px] text-[#808080]"> |
| 29 | Build ID |
| 30 | </dt> |
| 31 | <dd> |
| 32 | <code class="font-mono bg-[#1A1A2E] text-[#00FF41] px-1.5 py-0.5 rounded text-[11px]"> |
| 33 | a1b2c3d |
| 34 | </code> |
| 35 | </dd> |
| 36 | </div> |
| 37 | </dl> |
| 38 | <dl class="w-full bg-[#0F0F0F] border border-[#222] rounded-lg overflow-hidden"> |
| 39 | <div class="flex gap-4 px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 40 | <dt class="text-[11px] text-[#808080] min-w-[80px]"> |
| 41 | Status |
| 42 | </dt> |
| 43 | <dd> |
| 44 | <span class="inline-flex px-2 py-0.5 rounded-full text-[10px] font-semibold bg-[rgba(34,197,94,0.12)] text-[#22C55E]"> |
| 45 | Healthy |
| 46 | </span> |
| 47 | </dd> |
| 48 | </div> |
| 49 | <div class="flex gap-4 px-3.5 py-2.5 border-b border-[#1A1A1A]"> |
| 50 | <dt class="text-[11px] text-[#808080] min-w-[80px]"> |
| 51 | Uptime |
| 52 | </dt> |
| 53 | <dd class="text-xs font-medium text-[#E0E0E0]"> |
| 54 | 99.99% |
| 55 | </dd> |
| 56 | </div> |
| 57 | <div class="flex gap-4 px-3.5 py-2.5"> |
| 58 | <dt class="text-[11px] text-[#808080] min-w-[80px]"> |
| 59 | Latency |
| 60 | </dt> |
| 61 | <dd class="text-xs font-medium text-[#E0E0E0]"> |
| 62 | 42ms |
| 63 | </dd> |
| 64 | </div> |
| 65 | </dl> |
| 66 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-3 mx-auto p-4" style="max-width:420px"> |
| 2 | <dl class="mb-0 rounded overflow-hidden border border-secondary" style="background:#0F0F0F"> |
| 3 | <div class="d-flex justify-content-between align-items-center px-3 py-2" style="border-bottom:1px solid #1A1A1A"> |
| 4 | <dt style="font-size:11px;color:#808080"> |
| 5 | Plan |
| 6 | </dt> |
| 7 | <dd class="mb-0" style="font-size:12px;color:#E0E0E0;font-weight:500"> |
| 8 | Pro |
| 9 | </dd> |
| 10 | </div> |
| 11 | <div class="d-flex justify-content-between align-items-center px-3 py-2" style="border-bottom:1px solid #1A1A1A"> |
| 12 | <dt style="font-size:11px;color:#808080"> |
| 13 | Region |
| 14 | </dt> |
| 15 | <dd class="mb-0" style="font-size:12px;color:#E0E0E0;font-weight:500"> |
| 16 | us-east-1 |
| 17 | </dd> |
| 18 | </div> |
| 19 | <div class="d-flex justify-content-between align-items-center px-3 py-2" style="border-bottom:1px solid #1A1A1A"> |
| 20 | <dt style="font-size:11px;color:#808080"> |
| 21 | Last deploy |
| 22 | </dt> |
| 23 | <dd class="mb-0" style="font-size:12px;color:#E0E0E0;font-weight:500"> |
| 24 | 2 min ago |
| 25 | </dd> |
| 26 | </div> |
| 27 | <div class="d-flex justify-content-between align-items-center px-3 py-2"> |
| 28 | <dt style="font-size:11px;color:#808080"> |
| 29 | Build ID |
| 30 | </dt> |
| 31 | <dd class="mb-0"> |
| 32 | <code class="font-monospace" style="background:#1A1A2E;color:#00FF41;padding:2px 6px;border-radius:4px;font-size:11px"> |
| 33 | a1b2c3d |
| 34 | </code> |
| 35 | </dd> |
| 36 | </div> |
| 37 | </dl> |
| 38 | <dl class="mb-0 rounded overflow-hidden border border-secondary" style="background:#0F0F0F"> |
| 39 | <div class="d-flex gap-4 px-3 py-2" style="border-bottom:1px solid #1A1A1A"> |
| 40 | <dt style="font-size:11px;color:#808080;min-width:80px"> |
| 41 | Status |
| 42 | </dt> |
| 43 | <dd class="mb-0"> |
| 44 | <span class="badge rounded-pill fw-semibold" style="background:rgba(34,197,94,.12);color:#22C55E;font-size:10px"> |
| 45 | Healthy |
| 46 | </span> |
| 47 | </dd> |
| 48 | </div> |
| 49 | <div class="d-flex gap-4 px-3 py-2" style="border-bottom:1px solid #1A1A1A"> |
| 50 | <dt style="font-size:11px;color:#808080;min-width:80px"> |
| 51 | Uptime |
| 52 | </dt> |
| 53 | <dd class="mb-0" style="font-size:12px;color:#E0E0E0;font-weight:500"> |
| 54 | 99.99% |
| 55 | </dd> |
| 56 | </div> |
| 57 | <div class="d-flex gap-4 px-3 py-2"> |
| 58 | <dt style="font-size:11px;color:#808080;min-width:80px"> |
| 59 | Latency |
| 60 | </dt> |
| 61 | <dd class="mb-0" style="font-size:12px;color:#E0E0E0;font-weight:500"> |
| 62 | 42ms |
| 63 | </dd> |
| 64 | </div> |
| 65 | </dl> |
| 66 | </div> |
Accessibility
Data display components should be perceivable and navigable for everyone. Tables need proper headers, progress needs visible labels, and status indicators should not rely on color alone.
- Use <table> with <th scope="col"> so screen readers announce column relationships.
- Pair progress bars with visible percentage text and an aria-valuenow when building custom widgets.
- Do not communicate status only through color — add text labels or accessible labels to badges and dots.
- Keep skeleton loaders inside regions with aria-busy="true" and avoid showing them indefinitely.
- Ensure timeline items are ordered logically in the DOM; add headings or lists for complex event feeds.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.