Stat Row
A copy-paste profile headers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Profile HeadersHTMLCSSany framework
12.4k
Followers
312
Following
87
Posts
Copy into your project
HTML
<div class="nuda-stat-row">
<div class="nuda-stat-row__item">
<div class="nuda-stat-row__num">12.4k</div>
<div class="nuda-stat-row__label">Followers</div>
</div>
<div class="nuda-stat-row__sep"></div>
<div class="nuda-stat-row__item">
<div class="nuda-stat-row__num">312</div>
<div class="nuda-stat-row__label">Following</div>
</div>
<div class="nuda-stat-row__sep"></div>
<div class="nuda-stat-row__item">
<div class="nuda-stat-row__num">87</div>
<div class="nuda-stat-row__label">Posts</div>
</div>
</div>CSS
/* Stat Row
Three-up profile stats with tabular numerals.
Customize: --stat-bg, --stat-num, --stat-label */
.nuda-stat-row {
--stat-bg: #0c0c10;
--stat-num: #fafafa;
--stat-label: #63636e;
display: flex;
align-items: center;
padding: 14px 18px;
background: var(--stat-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
font-family: system-ui, sans-serif;
}
.nuda-stat-row__item {
flex: 1;
text-align: center;
animation: nuda-stat-fade 0.6s ease both;
}
.nuda-stat-row__item:nth-child(3) { animation-delay: 0.08s; }
.nuda-stat-row__item:nth-child(5) { animation-delay: 0.16s; }
.nuda-stat-row__num {
font-size: 1.05rem;
font-weight: 600;
color: var(--stat-num);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.nuda-stat-row__label {
font-size: 0.72rem;
color: var(--stat-label);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 2px;
}
.nuda-stat-row__sep {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.08);
}
@keyframes nuda-stat-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-stat-row__item { animation: none; }
}How to use Stat Row
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.