How to build a timeline with side numbers using Tailwind CSS

Ship logs and release notes often feel flat. This timeline pairs a marketing-style header with a vertical rail and side-aligned dates so every milestone looks intentional. The entire layout is built with Tailwind CSS—no JavaScript needed.

Why this layout works

The section header stays compact (max-w-xl) so copy wraps neatly.
A vertical rail on the left grounds the eye and lines up every milestone.
Each card includes a floating date label (dl placed outside the card on large screens) so the timeline reads like a numbered list.
Soft gradients (bg-linear-180, from-zinc-50 to-zinc-100) and outlines keep things tactile without heavy borders.

1. Section header with balanced copy

Wrap your intro copy in a narrow container and lean on uppercase microcopy for the tagline.

<div class="max-w-xl lg:text-balance">
  <p
    class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
  >
    Release Highlights
  </p>
  <h2
    class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold tracking-tight text-zinc-900"
  >
    Release highlights & updates
  </h2>
  <p class="text-base mt-4 font-medium text-zinc-500">
    Discover the key versions and feature upgrades that have shaped our
    platform.
  </p>
</div>

lg:text-balance keeps the title from breaking mid-phrase on desktop.
Keep copy widths under ~32rem to avoid long lines.

2. Timeline wrapper and vertical rail

Place the timeline inside a relative container so the rail and cards align. The decorative vertical line only appears on lg screens.

<div class="relative lg:ml-[max(calc(9.5rem+1px),calc(100%-80rem))]">
  <div
    class="hidden lg:block absolute top-3 bottom-0 right-full mr-7 md:mr-[3.25rem] w-px bg-zinc-200"
    aria-hidden="true"
  ></div>
  <div class="mt-12 space-y-8">
    <!-- timeline articles -->
  </div>
</div>

lg:ml-[max(...)] nudges the timeline so the rail doesn’t collide with the header.
Use space-y-8 between article blocks for breathing room.

3. Side numbers (dates) with `dl`

Each card uses a definition list where the date floats to the left of the card at large breakpoints.

<dl
  class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
>
  <dt class="sr-only">May 21</dt>
  <dd class="whitespace-nowrap">
    <p
      class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
    >
      <time datetime="May 21">May 21</time>
    </p>
  </dd>
</dl>

lg:right-full pushes the date outside the card while remaining inline on mobile.
sr-only keeps the <dt> accessible without visual clutter.

4. Cards, rail ticks, and gradient backdrop

The card stack is a flex column with a gradient background, outline, and subtle shadow. Each article also includes a left-hand rail snippet (lg:flex block) with a dot.

<article class="relative group">
  <div class="relative hidden mr-10 lg:flex md:mx-auto" aria-hidden="true">
    <div class="flex items-center justify-center w-3 h-full">
      <div class="h-full w-[0.05rem] bg-zinc-200"></div>
    </div>
    <div
      class="absolute right-full mr-6 top-2 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)]"
    >
      <div
        class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
      ></div>
    </div>
  </div>
  <div
    class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
  >
    <!-- heading, copy, dl -->
  </div>
</article>

bg-linear-180 plus outline creates a tactile card without raising contrast too high.
The group hook lets you add hover effects later if needed.

5. Copy-and-paste snippet

Drop the entire markup below into an Astro/HTML page. It uses only Tailwind CSS utilities.

<div class="max-w-xl lg:text-balance">
  <p
    class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
  >
    Release Highlights
  </p>
  <h2
    class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold tracking-tight text-zinc-900"
  >
    Release highlights & updates
  </h2>
  <p class="text-base mt-4 font-medium text-zinc-500">
    Discover the key versions and feature upgrades that have shaped our
    platform.
  </p>
</div>
<div class="relative lg:ml-[max(calc(9.5rem+1px),calc(100%-80rem))]">
  <div
    class="hidden absolute top-3 bottom-0 right-full mr-7 md:mr-[3.25rem] w-px bg-zinc-200 hidden lg:block"
  ></div>
  <div class="mt-12 space-y-8">
    <article class="relative group">
      <div class="relative hidden mr-10 lg:flex md:mx-auto">
        <div class="flex items-center justify-center w-3 h-full">
          <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
        </div>
        <div
          class="absolute right-full mr-6 top-2 text-blue-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
        >
          <div
            class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
          ></div>
        </div>
      </div>
      <div
        class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <h3
          class="text-lg md:text-xl mt-4 font-semibold tracking-tight lg:mt-0 text-zinc-900"
        >
          Introducing Version 3.0.0
        </h3>
        <p class="text-base mt-2 text-zinc-500 lg:text-balance">
          Kickstart a new era with a refreshed interface, AI-driven tools, and
          seamless app integrations to boost your productivity.
        </p>
        <dl
          class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
        >
          <dt class="sr-only">May 21</dt>
          <dd class="whitespace-nowrap">
            <p
              class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
            >
              <time datetime="May 21">May 21</time>
            </p>
          </dd>
        </dl>
      </div>
    </article>
    <article class="relative group">
      <div class="relative hidden mr-10 lg:flex md:mx-auto">
        <div class="flex items-center justify-center w-3 h-full">
          <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
        </div>
        <div
          class="absolute right-full mr-6 top-2 text-blue-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
        >
          <div
            class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
          ></div>
        </div>
      </div>
      <div
        class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <h3
          class="text-lg md:text-xl mt-4 font-semibold tracking-tight lg:mt-0 text-zinc-900"
        >
          Update 3.1.0: Stellar Performance
        </h3>
        <p class="text-base mt-2 text-zinc-500 lg:text-balance">
          Enhance your workflow with faster processing, deeper customization,
          and vibrant new visuals for an out-of-this-world experience.
        </p>
        <dl
          class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
        >
          <dt class="sr-only">Jun 15</dt>
          <dd class="whitespace-nowrap">
            <p
              class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
            >
              <time datetime="Jun 15">Jun 15</time>
            </p>
          </dd>
        </dl>
      </div>
    </article>
    <article class="relative group">
      <div class="relative hidden mr-10 lg:flex md:mx-auto">
        <div class="flex items-center justify-center w-3 h-full">
          <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
        </div>
        <div
          class="absolute right-full mr-6 top-2 text-blue-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
        >
          <div
            class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
          ></div>
        </div>
      </div>
      <div
        class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <h3
          class="text-lg md:text-xl mt-4 font-semibold tracking-tight lg:mt-0 text-zinc-900"
        >
          Release 3.2.0: AI Onboarding
        </h3>
        <p class="text-base mt-2 text-zinc-500 lg:text-balance">
          Streamline AI setup with intuitive wizards and quick-start templates
          to get you up and running fast.
        </p>
        <dl
          class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
        >
          <dt class="sr-only">Jul 30</dt>
          <dd class="whitespace-nowrap">
            <p
              class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
            >
              <time datetime="Jul 30">Jul 30</time>
            </p>
          </dd>
        </dl>
      </div>
    </article>
    <article class="relative group">
      <div class="relative hidden mr-10 lg:flex md:mx-auto">
        <div class="flex items-center justify-center w-3 h-full">
          <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
        </div>
        <div
          class="absolute right-full mr-6 top-2 text-blue-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
        >
          <div
            class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
          ></div>
        </div>
      </div>
      <div
        class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <h3
          class="text-lg md:text-xl mt-4 font-semibold tracking-tight lg:mt-0 text-zinc-900"
        >
          Introducing Version 4.0: Next-Gen Insights
        </h3>
        <p class="text-base mt-2 text-zinc-500 lg:text-balance">
          Unlock real-time analytics and predictive insights with our most
          powerful update yet.
        </p>
        <dl
          class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
        >
          <dt class="sr-only">Sep 10</dt>
          <dd class="whitespace-nowrap">
            <p
              class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
            >
              <time datetime="Sep 10">Sep 10</time>
            </p>
          </dd>
        </dl>
      </div>
    </article>
    <article class="relative group">
      <div class="relative hidden mr-10 lg:flex md:mx-auto">
        <div class="flex items-center justify-center w-3 h-full">
          <div class="h-full w-[0.05rem] bg-zinc-200 pointer-events-none"></div>
        </div>
        <div
          class="absolute right-full mr-6 top-2 text-blue-500 md:mr-12 w-[calc(0.5rem+1px)] h-[calc(0.5rem+1px)] overflow-visible sm:block"
        >
          <div
            class="rounded-full size-full outline-2 outline-zinc-100 bg-zinc-100"
          ></div>
        </div>
      </div>
      <div
        class="relative flex flex-col p-4 shadow bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <h3
          class="text-lg md:text-xl mt-4 font-semibold tracking-tight lg:mt-0 text-zinc-900"
        >
          Patch 4.1: Performance Boost
        </h3>
        <p class="text-base mt-2 text-zinc-500 lg:text-balance">
          Enhancements for speed, stability, and cross-platform compatibility.
        </p>
        <dl
          class="lg:absolute lg:left-0 order-first lg:top-0 tracking-tight text-sm text-zinc-500 lg:left-auto lg:right-full lg:mr-[calc(6.5rem+1px)]"
        >
          <dt class="sr-only">Oct 05</dt>
          <dd class="whitespace-nowrap">
            <p
              class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
            >
              <time datetime="Oct 05">Oct 05</time>
            </p>
          </dd>
        </dl>
      </div>
    </article>
  </div>
</div>

Finishing touches

Replace the date text with ISO values in datetime (e.g., datetime="2025-05-21") for better machine readability.
Add hover/focus states by targeting .group:hover .outline etc. if you want interactive flair.
Duplicate the article block to add more releases—everything scales vertically thanks to space-y-8.

/Michael Andreuzza

Black Weeks. Full Access for 50% OFF. Use code lex50 at checkout.