Member Since Badge
A copy-paste profile headers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Profile HeadersHTMLCSSany framework
Member sinceMar 2021
Copy into your project
HTML
<div class="nuda-since">
<span class="nuda-since__icon" aria-hidden="true">
<!-- calendar SVG -->
</span>
<span class="nuda-since__label">Member since</span>
<span class="nuda-since__date">Mar 2021</span>
</div>CSS
/* Member Since Badge
Minimal pill with a calendar icon and date.
Customize: --since-accent, --since-text */
.nuda-since {
--since-accent: #e4ff54;
--since-text: #a0a0a8;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
font-family: system-ui, sans-serif;
font-size: 0.78rem;
color: var(--since-text);
}
.nuda-since__icon { display: inline-flex; color: var(--since-accent); }
.nuda-since__label { color: var(--since-text); }
.nuda-since__date {
color: #fafafa;
font-weight: 600;
font-variant-numeric: tabular-nums;
}How to use Member Since Badge
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.