Badges + tags — small status labels
Pills, dots, and tags for status indicators. 'Trained', 'v2.1', 'GPU', 'beta' — small colored labels.
style.css
v3.1
style.css — the CSS rules
index.html — the HTML structure (what the CSS targets)
Live preview
updates as you type
🧠 How it works
Three types of small labels, each for a different purpose: BADGE — rounded pill with colored background + text. Used for status (Trained/Failed/Training). The background is a 22-alpha hex (≈13% opacity) of the same color as the text — soft, modern look. STATUS DOT — just a small colored circle. Used with text: '• Online'. Minimal space. TAG — outlined, square-ish. Used for categories/labels (python, GPU, classification). VERSION — monospace, dark background, green text. Looks like a code/version number. All use display: inline-block so they sit inline with text and respect padding.
✏️ Try these changes
-
Change badge border-radius from 999px to 4px→ badges become square-ish -
Add a new badge type: .badge-primary { background: #a0c00022; color: #a0c000; }→ green branded badge -
Change the status-dot size from 8px to 12px→ bigger dots -
Change the tag border to 2px dashed #a0c000→ tags become dashed green -
Change the version color from #a0c000 to #58a6ff→ version becomes blue