Holidays Deal Full Access for 50% OFF. Use code LEX50 at checkout

You'll get every theme available plus future additions. That's 45 themes total. Unlimited projects. Lifetime updates. One payment.

Full Access $199/$99
Back to all blog posts

How to build a responsive alternating timeline with Tailwind CSS

Create a clean, alternating vertical timeline using Tailwind CSS grid and flex utilities — no JavaScript required.

Published on November 18, 2025 by Michael Andreuzza

Overview

This guide builds a responsive, alternating timeline with Tailwind CSS — no JavaScript. On small screens it stacks vertically; from md: up it becomes a 9‑column grid where entries zig‑zag left and right around a centered vertical rule and dot.

We’ll cover:

  • The header (tagline, title, intro)
  • The timeline grid skeleton and center spine
  • Alternating cards (left/right) using col-start/col-end
  • Card styling with subtle gradient, outline, and shadow
  • Accessibility tips with semantic <time> and headings

1 — Section header

Use a narrow container with centered text and balanced wrapping.

<div class="max-w-xl mx-auto text-center lg:text-balance">
  <p class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500">Tagline</p>
  <h2 class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold tracking-tight text-zinc-900">Product milestones & launches</h2>
  <p class="text-base mt-4 font-medium text-zinc-500">Trace our journey from the inaugural release through every major feature update.</p>
  
</div>

2 — Grid skeleton and center spine

The wrapper becomes a 9‑column grid at md:. The center column (5) holds the vertical line and dot. Each item group renders as a row with two parts: content + spine.

<div class="flex flex-col mx-auto mt-12 grid-cols-9 md:grid">
  <!-- rows go here; alternate left/right per row -->
  
</div>

Center spine block (reused on every row):

<div class="relative mr-10 col-start-5 col-end-6 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 -mt-3 rounded-full size-3 outline-2 outline-zinc-100 bg-zinc-100 top-1/2"></div>
  
</div>

3 — Alternating left/right cards

  • Left‑side card row: wrap with flex flex-row-reverse md:contents then place the card in col-start-1 col-end-5.
  • Right‑side card row: wrap with flex md:contents then place the card in col-start-6 col-end-10.
<!-- Left item (card on the left) -->
<div class="flex flex-row-reverse md:contents">
  <div class="my-4 ml-auto col-start-1 col-end-5">
    <!-- card -->
  </div>
  <!-- center spine -->
  <!-- ...spine block from section 2... -->
</div>

<!-- Right item (card on the right) -->
<div class="flex md:contents">
  <!-- center spine -->
  <!-- ...spine block from section 2... -->
  <div class="my-4 mr-auto col-start-6 col-end-10">
    <!-- card -->
  </div>
</div>

4 — Card styling

Cards use a soft gradient background, 1px outline, rounded corners, and a subtle shadow.

<div class="relative p-4 shadow size-full bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl">
  <p class="text-xs font-semibold uppercase tracking-wide text-zinc-500">
    <time datetime="2025-08-01">01.08.2025</time>
  </p>
  <h3 class="text-base mt-4 font-semibold tracking-tight text-zinc-900">The dawn of version 3.0.0</h3>
  <p class="text-sm mt-2 text-zinc-500 lg:text-balance">This monumental update unveils a revamped interface, AI-powered tools, and seamless app integrations.</p>
  
</div>

5 — Accessibility tips

  • Use <time> with machine‑readable datetime (ISO: YYYY-MM-DD).
  • Use meaningful headings for each milestone.
  • Keep the decorative spine/dot hidden from assistive tech if needed (e.g., aria-hidden="true").
<p class="text-xs font-semibold uppercase tracking-wide text-zinc-500">
  <time datetime="2025-09-01">01.09.2025</time>
</p>

Full snippet

Paste the full example below (works with Tailwind CSS only):

<div class="max-w-xl mx-auto text-center lg:text-balance">
  <p
    class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
  >
    Tagline
  </p>
  <h2
    class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold tracking-tight text-zinc-900"
  >
    Product milestones & launches
  </h2>
  <p class="text-base mt-4 font-medium text-zinc-500">
    Trace our journey from the inaugural release through every major feature
    update.
  </p>
  
</div>
<div class="flex flex-col mx-auto mt-12 grid-cols-9 md:grid">
  <div class="flex flex-row-reverse md:contents">
    <div class="my-4 ml-auto col-start-1 col-end-5">
      <div
        class="relative p-4 shadow size-full bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <p
          class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
        >
          <time datetime="01.08.2025">01.08.2025</time>
        </p>
        <h3 class="text-base mt-4 font-semibold tracking-tight text-zinc-900">
          The dawn of version 3.0.0
        </h3>
        <p class="text-sm mt-2 text-zinc-500 lg:text-balance">
          This monumental update unveils a revamped interface, AI-powered tools,
          and seamless app integrations.
        </p>
      </div>
    </div>
    <div class="relative mr-10 col-start-5 col-end-6 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 -mt-3 rounded-full size-3 outline-2 outline-zinc-100 bg-zinc-100 top-1/2"
      ></div>
    </div>
  </div>
  <div class="flex md:contents">
    <div class="relative mr-10 col-start-5 col-end-6 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 -mt-3 rounded-full size-3 outline-2 outline-zinc-100 bg-zinc-100 top-1/2"
      ></div>
    </div>
    <div class="my-4 mr-auto col-start-6 col-end-10">
      <div
        class="relative p-4 shadow size-full bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <p
          class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
        >
          <time datetime="01.09.2025">01.09.2025</time>
        </p>
        <h3 class="text-base mt-4 font-semibold tracking-tight text-zinc-900">
          Version 3.1.0: The Cosmic Leap
        </h3>
        <p class="text-sm mt-2 text-zinc-500 lg:text-balance">
          Experience faster processing, enhanced customization, and
          stellar-themed visual enhancements.
        </p>
      </div>
    </div>
  </div>
  <div class="flex flex-row-reverse md:contents">
    <div class="my-4 ml-auto col-start-1 col-end-5">
      <div
        class="relative p-4 shadow size-full bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <p
          class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
        >
          <time datetime="02.15.2025">02.15.2025</time>
        </p>
        <h3 class="text-base mt-4 font-semibold tracking-tight text-zinc-900">
          Launch of Version 4.0
        </h3>
        <p class="text-sm mt-2 text-zinc-500 lg:text-balance">
          Introducing Version 4.0 with AI-driven insights and real-time
          analytics for smarter decision-making.
        </p>
      </div>
    </div>
    <div class="relative mr-10 col-start-5 col-end-6 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 -mt-3 rounded-full size-3 outline-2 outline-zinc-100 bg-zinc-100 top-1/2"
      ></div>
    </div>
  </div>
  <div class="flex md:contents">
    <div class="relative mr-10 col-start-5 col-end-6 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 -mt-3 rounded-full size-3 outline-2 outline-zinc-100 bg-zinc-100 top-1/2"
      ></div>
    </div>
    <div class="my-4 mr-auto col-start-6 col-end-10">
      <div
        class="relative p-4 shadow size-full bg-linear-180 outline outline-zinc-100 from-zinc-50 to-zinc-100 rounded-xl"
      >
        <p
          class="text-xs relative font-semibold uppercase tracking-wide text-zinc-500"
        >
          <time datetime="06.30.2025">06.30.2025</time>
        </p>
        <h3 class="text-base mt-4 font-semibold tracking-tight text-zinc-900">
          Release of Version 4.1: Ubiquitous AI
        </h3>
        <p class="text-sm mt-2 text-zinc-500 lg:text-balance">
          Experience AI at every touchpoint with new integrations, performance
          boosts, and expanded features.
        </p>
      </div>
    </div>
  </div>
</div>

Wrap‑up

The alternating effect relies on a centered grid spine (column 5) and swapping the card’s grid columns per row. The mobile experience remains a straightforward vertical list, while larger screens get a clean, readable zig‑zag layout — all with Tailwind utilities.

/Michael Andreuzza