Year Separators
A copy-paste timelines component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
TimelinesHTMLCSSany framework
2022
Launched MVP
First 1k users
2023
Series A closed
Team grew to 20
Copy into your project
HTML
<div class="nuda-tl-year">
<div class="nuda-tl-year__sep">
<span class="nuda-tl-year__label">2022</span>
</div>
<div class="nuda-tl-year__item">
<div class="nuda-tl-year__dot"></div>
<span class="nuda-tl-year__text">Launched MVP</span>
</div>
<div class="nuda-tl-year__item">
<div class="nuda-tl-year__dot"></div>
<span class="nuda-tl-year__text">First 1k users</span>
</div>
<div class="nuda-tl-year__sep">
<span class="nuda-tl-year__label">2023</span>
</div>
<div class="nuda-tl-year__item">
<div class="nuda-tl-year__dot"></div>
<span class="nuda-tl-year__text">Series A closed</span>
</div>
<div class="nuda-tl-year__item">
<div class="nuda-tl-year__dot"></div>
<span class="nuda-tl-year__text">Team grew to 20</span>
</div>
</div>CSS
.nuda-tl-year {
display: flex;
flex-direction: column;
gap: 0;
width: 210px;
padding: 4px 0;
}
.nuda-tl-year__sep {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0 6px;
}
.nuda-tl-year__sep::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255,255,255,.08);
}
.nuda-tl-year__label {
font-size: 11px;
font-weight: 700;
color: #e4ff54;
letter-spacing: .08em;
flex-shrink: 0;
background: #141414;
padding-right: 6px;
}
.nuda-tl-year__item {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 0 5px 4px;
position: relative;
}
.nuda-tl-year__item::before {
content: '';
position: absolute;
left: 9px;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255,255,255,.06);
}
.nuda-tl-year__dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #1a1a1a;
border: 2px solid rgba(255,255,255,.18);
flex-shrink: 0;
position: relative;
z-index: 1;
}
.nuda-tl-year__text {
font-size: 11px;
color: #cfcfcf;
}
How to use Year Separators
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.