{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Carbon Shelves
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; } .dm-carbon { background: #14141c; border: 1px solid #1f1f2e; border-radius: 8px; overflow: hidden; } .dm-carbon__row { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: #14141c; transition: background 0.15s; } .dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; } .dm-carbon__row:nth-child(even) { background: #181822; } .dm-carbon__row:hover { background: #1f1f2e; } .dm-carbon__name { font: 600 12px ui-monospace, monospace; color: #e2e8f0; } .dm-carbon__meta { font: 500 10.5px ui-monospace, monospace; color: #6b7080; letter-spacing: 0.02em; }
<div class="dm-carbon-bg"> <div class="dm-carbon"> <div class="dm-carbon__row"> <span class="dm-carbon__name">api/auth.ts</span> <span class="dm-carbon__meta">2.4 KB · 3 min ago</span> </div> <div class="dm-carbon__row"> <span class="dm-carbon__name">api/session.ts</span> <span class="dm-carbon__meta">1.8 KB · 7 min ago</span> </div> <div class="dm-carbon__row"> <span class="dm-carbon__name">api/users.ts</span> <span class="dm-carbon__meta">4.1 KB · 14 min ago</span> </div> <div class="dm-carbon__row"> <span class="dm-carbon__name">db/schema.sql</span> <span class="dm-carbon__meta">12.3 KB · 1 hour ago</span> </div> </div> </div>
Live preview
Ready