{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Slate Stack
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; } .dm-slate { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 18px 20px; color: #f1f5f9; } .dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .dm-slate__title { font: 600 12px system-ui, sans-serif; color: #94a3b8; letter-spacing: 0.04em; } .dm-slate__pill { background: #334155; color: #cbd5e1; padding: 3px 10px; border-radius: 12px; font: 600 10px ui-monospace, monospace; } .dm-slate__num { font: 800 26px/1 system-ui, sans-serif; color: #fff; margin-bottom: 6px; letter-spacing: -0.02em; } .dm-slate__delta { font: 600 11px system-ui, sans-serif; color: #4ade80; }
<div class="dm-slate-bg"> <div class="dm-slate"> <div class="dm-slate__head"> <span class="dm-slate__title">Quarterly revenue</span> <span class="dm-slate__pill">Q1 2026</span> </div> <div class="dm-slate__num">$248,392</div> <div class="dm-slate__delta">+18.4% from last quarter</div> </div> </div>
Live preview
Ready