Span Components

Reusable <span> styles for tags and labels.

<span class="tag-span">UI</span>

Inline status indicators with dot and label — Online, Offline, Busy, and Away variants.

<span class="status online">● Online</span>

Rounded modern pill-style labels for highlighting status or categories.

<span class="pill success">Success</span>

Interactive hover tooltip component with styled text bubble.

<span class="tooltip">Hover Me</span>

Styled <kbd> elements that look like real physical keyboard keys.

<kbd class="key">⌘</kbd> + <kbd class="key">K</kbd>

kbd.key {
  display: inline-block;
  padding: 3px 8px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-bottom: 3px solid var(--card-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

Inline code spans styled with a monospace font and subtle background — ideal for documentation.

<code class="inline-code">display: flex</code>

code.inline-code {
  background: rgba(235,104,53,0.1);
  color: #eb6835;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 600;
}

Text with a gradient fill using background-clip: text — eye-catching headings.

<span class="gradient-text">UIverse</span>

.gradient-text {
  background: linear-gradient(90deg, #eb6835, #6c5ce7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

Pulsing animated badges to indicate live, recording, or streaming states.

<span class="badge-live">● Live</span>

.badge-live {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(214,48,49,0.12);
  color: #d63031;
  font-size: 13px;
  font-weight: 700;
  animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live {
  0%,100% { box-shadow: 0 0 0 0 rgba(214,48,49,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(214,48,49,0); }
}

Version and release-stage labels — stable, beta, and alpha variants included.

<span class="version">v1.0.0</span>
<span class="version beta">beta</span>
<span class="version stable">stable</span>

.version {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: monospace;
  background: rgba(108,92,231,0.1);
  color: #6c5ce7;
  border: 1px solid rgba(108,92,231,0.25);
}
.version.beta   { background: rgba(253,203,110,0.12); color: #d98e00; border-color: rgba(253,203,110,0.3); }
.version.stable { background: rgba(0,184,148,0.1);   color: #00b894; border-color: rgba(0,184,148,0.3); }

Strikethrough for old prices, underline accents, and bold highlight spans.

<span class="strike">$49</span>
<span class="underline-accent">Verified ✓</span>
<span class="bold-accent">98%</span>

.strike { text-decoration: line-through; color: #aaa; }
.underline-accent {
  text-decoration: underline;
  text-decoration-color: #eb6835;
  text-underline-offset: 3px;
  font-weight: 600;
  color: var(--text-primary);
}
.bold-accent { font-weight: 800; color: #eb6835; }

Interactive spans that copy their value to clipboard on click — with a visual confirmation.

<span class="copy-tag" onclick="copyTag(this, '#eb6835')">
  #eb6835 <i class="fa-solid fa-copy"></i>
</span>

.copy-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--body-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}
.copy-tag:hover { border-color: #eb6835; color: #eb6835; }

function copyTag(el, text) {
  navigator.clipboard.writeText(text);
  el.innerHTML = '✓ Copied!';
  setTimeout(() => el.innerHTML = text + ' copy-icon', 1500);
}

A blinking cursor span — pair it with a typewriter JS effect or use standalone as a caret.

<span>Building with UIverse<span class="cursor">|</span></span>

        }

Electric neon-glow text spans using CSS text-shadow layering — cyan, purple, and green variants.

Inline skill-level progress rows using pure <span> elements — no JS required.

<div class="prog-row">
  <span class="prog-label">Design</span>
  <span class="prog-bar-wrap">
    <span class="prog-bar" style="width:92%"></span>
  </span>
  <span class="prog-pct">92%</span>
</div>

.prog-row { display:flex; align-items:center; gap:12px; }
.prog-label { width:64px; font-size:12px; font-weight:700; }
.prog-bar-wrap { flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.prog-bar { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#6366f1,#8b5cf6); }
.prog-pct { font-size:12px; font-weight:700; width:32px; text-align:right; }

Tushar Chinmay Sai +4 more

Compact inline user chips combining a rounded avatar photo with a name label — great for assignees and mentions.

<span class="avatar-chip">
  <img src="avatar.jpg" alt="User">
  <span>Tushar</span>
</span>

.avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(99,102,241,.1);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #a5b4fc;
  cursor: default;
  transition: .2s;
}
.avatar-chip img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.avatar-chip:hover { transform: translateY(-2px); }

Live countdown timer built with <span> blocks — hours, minutes, and seconds update in real time via JS.

<div class="countdown">
  <span class="cd-block"><span class="cd-num" id="cdH">00</span><span class="cd-lbl">hrs</span></span>
  <span class="cd-sep">:</span>
  <span class="cd-block"><span class="cd-num" id="cdM">12</span><span class="cd-lbl">min</span></span>
  <span class="cd-sep">:</span>
  <span class="cd-block"><span class="cd-num" id="cdS">59</span><span class="cd-lbl">sec</span></span>
</div>

.countdown { display:inline-flex; align-items:center; gap:6px; }
.cd-block { display:flex; flex-direction:column; align-items:center;
  background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.2);
  border-radius:12px; padding:8px 14px; min-width:60px; }
.cd-num { font-size:26px; font-weight:800; font-family:'Syne',sans-serif;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.cd-lbl { font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; }
.cd-sep { font-size:24px; font-weight:800; color:#6366f1; }

// JS
let total = 12 * 60 + 59;
setInterval(() => {
  total = total > 0 ? total - 1 : 0;
  document.getElementById('cdH').textContent = String(Math.floor(total/3600)).padStart(2,'0');
  document.getElementById('cdM').textContent = String(Math.floor((total%3600)/60)).padStart(2,'0');
  document.getElementById('cdS').textContent = String(total%60).padStart(2,'0');
}, 1000);

CSS-animated horizontal news ticker using <span> elements — infinite scroll with a branded LIVE pill.

<div class="ticker-wrap">
  <span class="ticker-label">LIVE</span>
  <div class="ticker-track">
    <span class="ticker-item">🚀 UIverse V2 launched</span>
    <span class="ticker-item">⚡ Dark mode supported</span>
  </div>
</div>

.ticker-wrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgba(99,102,241,.06);
  border-top: 1px solid rgba(99,102,241,.15);
  border-bottom: 1px solid rgba(99,102,241,.15);
  height: 40px;
}
.ticker-label {
  flex-shrink: 0;
  padding: 4px 12px;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0 6px 6px 0;
  margin-right: 16px;
}
.ticker-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: ticker 18s linear infinite;
}
.ticker-item { font-size: 13px; font-weight: 600; color: #94a3b8; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
.cursor {
  display: inline-block;
  font-weight: 100;
  color: var(--accent);
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }