Project Roadmap Timeline with Status Filters

A clean, responsive project timeline featuring milestone cards, completion statuses, dates and interactive filters. Ideal for project management dashboards and SaaS applications.

This tailwind example is contributed by JUGENDRA GANGWAR, on 03-Nov-2026. Component is made with Tailwind v4. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author JUGENDRA GANGWAR

Tailwind v4 3

Fork Fullscreen

<section data-roadmap class="mx-auto w-full max-w-4xl rounded-3xl border border-slate-200 bg-white p-5 shadow-sm sm:p-8 lg:p-10">
  <div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
    <div>
      <span class="inline-flex items-center gap-2 rounded-full bg-indigo-50 px-3 py-1.5 text-xs font-semibold text-indigo-600">
        <span class="h-1.5 w-1.5 rounded-full bg-indigo-500"></span>
        PROJECT OVERVIEW
      </span>
      <h2 class="mt-4 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Project roadmap</h2>
      <p class="mt-2 text-sm text-slate-500">Track milestones and stay on top of your progress.</p>
    </div>
    <div class="rounded-2xl bg-slate-50 px-5 py-3">
      <p class="text-xs font-medium text-slate-500">Overall progress</p>
      <div class="mt-2 flex items-center gap-3">
        <div class="h-2 w-28 overflow-hidden rounded-full bg-slate-200">
          <div class="h-full w-2/5 rounded-full bg-indigo-600"></div>
        </div>
        <span class="text-sm font-bold text-slate-900">40%</span>
      </div>
    </div>
  </div>

<div class="mt-8 flex flex-wrap gap-2" role="group" aria-label="Filter roadmap milestones">
    <button type="button" data-roadmap-filter="all" aria-pressed="true" class="roadmap-filter active rounded-xl px-4 py-2.5 text-xs font-semibold transition">All milestones</button>
    <button type="button" data-roadmap-filter="completed" aria-pressed="false" class="roadmap-filter rounded-xl px-4 py-2.5 text-xs font-semibold transition">Completed</button>
    <button type="button" data-roadmap-filter="progress" aria-pressed="false" class="roadmap-filter rounded-xl px-4 py-2.5 text-xs font-semibold transition">In progress</button>
    <button type="button" data-roadmap-filter="upcoming" aria-pressed="false" class="roadmap-filter rounded-xl px-4 py-2.5 text-xs font-semibold transition">Upcoming</button>
  </div>

<div class="mt-9">
    <ol class="roadmap-list relative space-y-8">
      <li class="roadmap-item relative pl-12 sm:pl-16" data-status="completed">
        <span class="roadmap-marker absolute left-0 top-1 flex h-9 w-9 items-center justify-center rounded-full border-4 border-white bg-emerald-500 text-white shadow-sm">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 12 4 4L19 6"/></svg>
        </span>
        <div class="rounded-2xl border border-slate-200 p-5 transition hover:border-emerald-200 hover:shadow-sm">
          <div class="flex flex-wrap items-center justify-between gap-3">
            <span class="text-xs font-semibold text-slate-400">MILESTONE 01</span>
            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">Completed</span>
          </div>
          <h3 class="mt-3 text-base font-bold text-slate-900">Project Discovery</h3>
          <p class="mt-2 text-sm leading-6 text-slate-500">Research, planning and defining the project requirements and objectives.</p>
          <div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-400">
            <span>Jan 08, 2026</span>
            <span>•</span>
            <span>100% completed</span>
          </div>
        </div>
      </li>

<li class="roadmap-item relative pl-12 sm:pl-16" data-status="completed">
        <span class="roadmap-marker absolute left-0 top-1 flex h-9 w-9 items-center justify-center rounded-full border-4 border-white bg-emerald-500 text-white shadow-sm">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="m5 12 4 4L19 6"/></svg>
        </span>
        <div class="rounded-2xl border border-slate-200 p-5 transition hover:border-emerald-200 hover:shadow-sm">
          <div class="flex flex-wrap items-center justify-between gap-3">
            <span class="text-xs font-semibold text-slate-400">MILESTONE 02</span>
            <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">Completed</span>
          </div>
          <h3 class="mt-3 text-base font-bold text-slate-900">UI/UX Design</h3>
          <p class="mt-2 text-sm leading-6 text-slate-500">Creating wireframes, visual concepts and final interface designs.</p>
          <div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-400">
            <span>Feb 12, 2026</span>
            <span>•</span>
            <span>100% completed</span>
          </div>
        </div>
      </li>

<li class="roadmap-item relative pl-12 sm:pl-16" data-status="progress">
        <span class="roadmap-marker absolute left-0 top-1 flex h-9 w-9 items-center justify-center rounded-full border-4 border-white bg-indigo-600 text-white shadow-md shadow-indigo-200">
          <span class="h-2.5 w-2.5 rounded-full bg-white"></span>
        </span>
        <div class="rounded-2xl border border-indigo-200 bg-indigo-50/30 p-5 transition hover:shadow-sm">
          <div class="flex flex-wrap items-center justify-between gap-3">
            <span class="text-xs font-semibold text-slate-400">MILESTONE 03</span>
            <span class="rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700">In Progress</span>
          </div>
          <h3 class="mt-3 text-base font-bold text-slate-900">Development</h3>
          <p class="mt-2 text-sm leading-6 text-slate-500">Building core functionality and integrating all designed interfaces.</p>
          <div class="mt-4 flex items-center justify-between gap-3">
            <span class="text-xs text-slate-400">Mar 20, 2026</span>
            <span class="text-xs font-semibold text-indigo-600">65% complete</span>
          </div>
          <div class="mt-3 h-1.5 overflow-hidden rounded-full bg-indigo-100">
            <div class="h-full w-[65%] rounded-full bg-indigo-600"></div>
          </div>
        </div>
      </li>

<li class="roadmap-item relative pl-12 sm:pl-16" data-status="upcoming">
        <span class="roadmap-marker absolute left-0 top-1 flex h-9 w-9 items-center justify-center rounded-full border-4 border-white bg-slate-200 text-slate-500 shadow-sm">
          <span class="h-2.5 w-2.5 rounded-full bg-white"></span>
        </span>
        <div class="rounded-2xl border border-dashed border-slate-300 p-5 transition hover:border-slate-400">
          <div class="flex flex-wrap items-center justify-between gap-3">
            <span class="text-xs font-semibold text-slate-400">MILESTONE 05</span>
            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-500">Upcoming</span>
          </div>
          <h3 class="mt-3 text-base font-bold text-slate-900">Launch & Deployment</h3>
          <p class="mt-2 text-sm leading-6 text-slate-500">Final deployment, production checks and project handover.</p>
          <div class="mt-4 text-xs text-slate-400">May 02, 2026</div>
        </div>
      </li>
    </ol>
    <div class="roadmap-empty hidden rounded-2xl border border-dashed border-slate-200 py-10 text-center">
      <p class="text-sm font-medium text-slate-500">No milestones found in this category.</p>
    </div>
  </div>
  <div class="mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 pt-6">
    <p class="text-xs text-slate-400"><span data-roadmap-visible>5</span> milestones displayed</p>
    <span class="text-xs font-medium text-slate-500">Last updated: Today</span>
  </div>
</section>

Related Examples

Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Komal Jain

3 years ago

12.9k
Timeline
Beautiful Tailwind timeline

Brandon D

4 years ago

17.4k
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Shariar Hasan

2 years ago

5k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

9 months ago

929
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.8k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
Event timeline list

Laurits

3 years ago

14.1k
Timeline | Roadmap example
Display Recent Updates, Timeline or Rroadmap with this component

Anja Müller

3 years ago

13.4k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.9k
Sticky Changelog

Michael Andreuzza

2 years ago

3.2k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k