Vertical Timeline Component with Tailwind Styling

<div class="bg-white/5 border-white/10 border rounded-2xl pt-4 pr-4 pb-4 pl-4">
  <div class="flex items-center gap-2">
    <svg data-lucide="timeline" class="w-4 h-4 text-white/80"></svg>
    <h3 class="text-xl font-semibold tracking-tight">Timeline</h3>
  </div>
  <ol class="mt-3">
    <li class="relative pl-6 pb-4 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white"></span>
      <p class="text-xs text-white/60">2025</p>
      <p class="text-sm font-medium tracking-tight">Independent — AI Engineer</p>
      <p class="text-xs text-white/60 mt-1">Building production AI systems, RAG pipelines, and agentic workflows for startups and enterprise teams.</p>
    </li>
    <li class="relative pl-6 pb-4 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/80"></span>
      <p class="text-xs text-white/60">2022 — 2024</p>
      <p class="text-sm font-medium tracking-tight">Senior Product Designer — Analytics</p>
      <p class="text-xs text-white/60 mt-1">Led design for data visualization platform, shipped ML-powered insights dashboard used by 10k+ analysts.</p>
    </li>
    
    <li class="relative pl-6 border-l border-white/10">
      <span class="absolute left-[-5px] top-1.5 w-2 h-2 rounded-full bg-white/60"></span>
      <p class="text-xs text-white/60">2017 — 2021</p>
      <p class="text-sm font-medium tracking-tight">Frontend Engineer — Commerce</p>
      <p class="text-xs text-white/60 mt-1">Built responsive e-commerce platform with React/Node.js, optimized for mobile conversion and performance.</p>
    </li>
  </ol>
</div>