{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Mocha Workstation
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; } .dm-mocha { background: #2a1f18; border: 1px solid #3d2c20; border-radius: 10px; padding: 18px 22px; color: #f5e6d3; } .dm-mocha__meta { font: 700 10px ui-monospace, monospace; color: #c9a961; letter-spacing: 0.12em; margin-bottom: 10px; } .dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; } .dm-mocha__body { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; } .dm-mocha__author { display: flex; align-items: center; gap: 8px; font: 600 11px system-ui, sans-serif; color: #c9a961; padding-top: 12px; border-top: 1px solid #3d2c20; } .dm-mocha__avatar { width: 22px; height: 22px; background: #c9a961; color: #1c1410; border-radius: 50%; display: grid; place-items: center; font: 700 11px system-ui, sans-serif; }
<div class="dm-mocha-bg"> <article class="dm-mocha"> <div class="dm-mocha__meta">FEATURED · 4 MIN READ</div> <h3 class="dm-mocha__title">The art of restraint</h3> <p class="dm-mocha__body">In the long view, less surface area means fewer maintenance burdens. Choose carefully what you build.</p> <div class="dm-mocha__author"> <span class="dm-mocha__avatar">M</span> <span>Marcus Rivera</span> </div> </article> </div>
Live preview
Ready