timelinesBeginner

Timeline — Compact

Compact vertical timeline for dense histories.

Live preview

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-ryan-staxs-projects-fb4e0931.vercel.app/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>