Vibedex.io
Back to gallery
timelinesBeginner

Timeline — Compact

Compact vertical timeline for dense histories.

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 compact vertical timeline with Tailwind: a vertical line with smaller event markers, each event tightly spaced with a date, title, and one-line note. Used for activity feeds.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/timelines/2.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-app-timeline-2
-->
<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:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200"
    >
      <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
        <div
          class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
        >
          <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>
        </div>

        <div aria-hidden="true"></div>
      </li>

      <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
        <div
          class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
        >
          <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">5/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>
        </div>

        <div aria-hidden="true"></div>
      </li>

      <li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
        <div
          class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
        >
          <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>
        </div>

        <div aria-hidden="true"></div>
      </li>
    </ol>
  </div>
</div>