Neon Left Rail
A glowing purple spine anchors event icons to detailed metric cards. Dark, dense, and data-forward — built for engineering dashboards, mission logs, and product announcements where every event needs numbers attached.
Neon Left Rail the 15th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl15-scene">
<div class="tl15-wrap">
<div class="tl15-item">
<div class="tl15-icon" aria-hidden="true">◉</div>
<div class="tl15-meta">
<span class="tl15-date">Jan 2022</span>
<span class="tl15-badge">Launch</span>
</div>
<h3 class="tl15-title">Mission Alpha Initiated</h3>
<p class="tl15-body">Initial deployment of the orbital logistics platform. Four units synchronized across three continents within the first 72 hours of operation.</p>
<div class="tl15-stats">
<div class="tl15-stat"><span class="tl15-stat-val">4</span><span class="tl15-stat-label">Units</span></div>
<div class="tl15-stat"><span class="tl15-stat-val">72h</span><span class="tl15-stat-label">Deploy</span></div>
<div class="tl15-stat"><span class="tl15-stat-val">99.2%</span><span class="tl15-stat-label">Uptime</span></div>
</div>
</div>
<div class="tl15-item">
<div class="tl15-icon" aria-hidden="true">⚡</div>
<div class="tl15-meta">
<span class="tl15-date">Sep 2022</span>
<span class="tl15-badge">Upgrade</span>
</div>
<h3 class="tl15-title">Propulsion Overhaul</h3>
<p class="tl15-body">Second-generation ion drives installed across the fleet, cutting fuel consumption by 38% and extending operational range by nearly 2,000km.</p>
<div class="tl15-stats">
<div class="tl15-stat"><span class="tl15-stat-val">−38%</span><span class="tl15-stat-label">Fuel</span></div>
<div class="tl15-stat"><span class="tl15-stat-val">+2k</span><span class="tl15-stat-label">km Range</span></div>
</div>
</div>
<div class="tl15-item">
<div class="tl15-icon" aria-hidden="true">⚠</div>
<div class="tl15-meta">
<span class="tl15-date">Mar 2024</span>
<span class="tl15-badge">Critical</span>
</div>
<h3 class="tl15-title">Communication Relay Failure</h3>
<p class="tl15-body">Ground station Echo suffered a 14-hour blackout. Autonomous recovery protocols activated; manual override restored full comms within 6 hours ahead of schedule.</p>
<div class="tl15-stats">
<div class="tl15-stat"><span class="tl15-stat-val">14h</span><span class="tl15-stat-label">Outage</span></div>
<div class="tl15-stat"><span class="tl15-stat-val">6h</span><span class="tl15-stat-label">Recovery</span></div>
</div>
</div>
<div class="tl15-item">
<div class="tl15-icon" aria-hidden="true">★</div>
<div class="tl15-meta">
<span class="tl15-date">Nov 2025</span>
<span class="tl15-badge">Milestone</span>
</div>
<h3 class="tl15-title">Global Coverage Achieved</h3>
<p class="tl15-body">The 24th satellite placed the network in geosynchronous alignment. Full polar coverage now enables sub-50ms latency for any point on Earth.</p>
<div class="tl15-stats">
<div class="tl15-stat"><span class="tl15-stat-val">24</span><span class="tl15-stat-label">Satellites</span></div>
<div class="tl15-stat"><span class="tl15-stat-val"><50ms</span><span class="tl15-stat-label">Latency</span></div>
<div class="tl15-stat"><span class="tl15-stat-val">100%</span><span class="tl15-stat-label">Coverage</span></div>
</div>
</div>
</div>
</div> .tl15-scene {
--tl15-bg: #08081a;
--tl15-accent: #7c3aed;
--tl15-accent-soft: #a78bfa;
background: var(--tl15-bg);
padding: 2.5rem 1.5rem;
font-family: 'Inter', system-ui, sans-serif;
}
.tl15-wrap {
max-width: 720px;
margin: 0 auto;
border-left: 1px solid rgba(124,58,237,0.3);
}
.tl15-item {
position: relative;
padding: 0 0 3rem 3rem;
}
.tl15-item:last-child { padding-bottom: 0; }
.tl15-item::before {
content: '';
position: absolute;
left: -1px;
top: 0;
height: 100%;
width: 1px;
background: linear-gradient(
to bottom,
rgba(124,58,237,0.8),
rgba(124,58,237,0.1)
);
}
.tl15-icon {
position: absolute;
left: -22px;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(124,58,237,0.15);
border: 1px solid rgba(124,58,237,0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--tl15-accent-soft);
box-shadow: 0 0 20px rgba(124,58,237,0.3);
}
.tl15-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.7rem;
}
.tl15-date {
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 1.5px;
color: var(--tl15-accent);
text-transform: uppercase;
}
.tl15-badge {
font-family: ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.5px;
padding: 0.15rem 0.5rem;
background: rgba(124,58,237,0.15);
border: 1px solid rgba(124,58,237,0.3);
border-radius: 3px;
color: var(--tl15-accent-soft);
}
.tl15-title {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.5rem;
}
.tl15-body {
font-size: 13px;
color: rgba(255,255,255,0.45);
line-height: 1.7;
margin: 0 0 0.9rem;
}
.tl15-stats {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.tl15-stat {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.tl15-stat-val {
font-family: ui-monospace, monospace;
font-size: 15px;
font-weight: 500;
color: var(--tl15-accent-soft);
}
.tl15-stat-label {
font-size: 10px;
color: rgba(255,255,255,0.3);
letter-spacing: 0.5px;
text-transform: uppercase;
}