{
CF
}
Code
Fronts
Back to CSS Dark Mode UI
Phosphor Card
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; } .dm-phos { position: relative; background: #14141f; border: 1px solid #1f1f30; border-radius: 10px; padding: 16px 20px 16px 22px; overflow: hidden; } .dm-phos::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: #ec4899; border-radius: 0 2px 2px 0; box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4); } .dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .dm-phos__live { font: 700 10px ui-monospace, monospace; color: #ec4899; letter-spacing: 0.12em; } .dm-phos__count { font: 500 10px ui-monospace, monospace; color: #6b7080; } .dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; } .dm-phos__body { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }
<div class="dm-phos-bg"> <article class="dm-phos"> <div class="dm-phos__top"> <span class="dm-phos__live">● LIVE</span> <span class="dm-phos__count">2,341 watching</span> </div> <h3 class="dm-phos__title">React Server Components Deep Dive</h3> <p class="dm-phos__body">A walk through the boundaries between server and client.</p> </article> </div>
Live preview
Ready