Timeline Generator

<ul class="timeline">
  <li class="tl-item">
    <span class="tl-date">2021</span>
    <h3 class="tl-title">Founded</h3>
    <p class="tl-desc">The company was started in a garage.</p>
  </li>
  <li class="tl-item">
    <span class="tl-date">2022</span>
    <h3 class="tl-title">First launch</h3>
    <p class="tl-desc">Shipped the first public release.</p>
  </li>
  <li class="tl-item">
    <span class="tl-date">2023</span>
    <h3 class="tl-title">Series A</h3>
    <p class="tl-desc">Raised funding to grow the team.</p>
  </li>
  <li class="tl-item">
    <span class="tl-date">2024</span>
    <h3 class="tl-title">1M users</h3>
    <p class="tl-desc">Crossed one million active users.</p>
  </li>
</ul>
<style>
.timeline{list-style:none;max-width:560px;margin:0 auto;padding:0 0 0 28px;border-left:3px solid #6366f1;}
.tl-item{position:relative;margin:0 0 28px;}
.tl-item:last-child{margin-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-37px;top:2px;width:14px;height:14px;border-radius:50%;background:#6366f1;box-shadow:0 0 0 4px #fff;}
.tl-date{font-size:12px;font-weight:600;letter-spacing:.03em;color:#6366f1;text-transform:uppercase;}
.tl-title{margin:4px 0 4px;font-size:17px;color:#0f172a;}
.tl-desc{margin:0;font-size:14px;line-height:1.5;color:#475569;}
</style>