Vibedex.io
Back to gallery
timelinesIntermediate

Vertical Timeline

A vertical event timeline with date markers and connecting line.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a vertical timeline with Tailwind: a column with a left-side gutter containing a vertical line and circular markers at each event. Each event is a card with a date, title, and short body. Markers can be styled per status (completed / current / upcoming) with colored backgrounds.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/timelines/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-timeline
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-xl p-6 w-full">
<ol
      class="relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200"
    >
      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700">12/02/2025</time>

          <h3 class="text-lg font-bold text-gray-900">Kickoff</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700">15/03/2025</time>

          <h3 class="text-lg font-bold text-gray-900">First Milestone</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>

      <li class="relative -ms-1.5 flex items-start gap-4">
        <span class="size-3 shrink-0 rounded-full bg-blue-600"></span>

        <div class="-mt-2">
          <time class="text-xs/none font-medium text-gray-700">24/04/2025</time>

          <h3 class="text-lg font-bold text-gray-900">Launch</h3>

          <p class="mt-0.5 text-sm text-gray-700">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
            adipisci tenetur sunt quae exercitationem sed pariatur porro!
          </p>
        </div>
      </li>
    </ol>
  </div>
</div>