divtimelineintermediate

Vertical Timeline

A vertical timeline with connecting lines, dot markers, and event cards.

Preview

Feb 2026

Project Launched

Successfully launched the beta version to early adopters.

Jan 2026

First 1,000 Users

Reached our first milestone of 1,000 active users.

Dec 2025

Development Started

Began building the MVP with a small team.

<div class="max-w-md mx-auto">
  <div class="relative pl-8 pb-8 border-l-2 border-gray-200">
    <div class="absolute left-[-9px] top-0 w-4 h-4 bg-blue-600 rounded-full border-2 border-white"></div>
    <div class="ml-4">
      <p class="text-xs text-gray-400 mb-1">Feb 2026</p>
      <h4 class="text-sm font-semibold text-gray-900">Project Launched</h4>
      <p class="text-sm text-gray-500 mt-1">Successfully launched the beta version to early adopters.</p>
    </div>
  </div>
  <div class="relative pl-8 pb-8 border-l-2 border-gray-200">
    <div class="absolute left-[-9px] top-0 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
    <div class="ml-4">
      <p class="text-xs text-gray-400 mb-1">Jan 2026</p>
      <h4 class="text-sm font-semibold text-gray-900">First 1,000 Users</h4>
      <p class="text-sm text-gray-500 mt-1">Reached our first milestone of 1,000 active users.</p>
    </div>
  </div>
  <div class="relative pl-8 border-l-2 border-transparent">
    <div class="absolute left-[-9px] top-0 w-4 h-4 bg-gray-300 rounded-full border-2 border-white"></div>
    <div class="ml-4">
      <p class="text-xs text-gray-400 mb-1">Dec 2025</p>
      <h4 class="text-sm font-semibold text-gray-900">Development Started</h4>
      <p class="text-sm text-gray-500 mt-1">Began building the MVP with a small team.</p>
    </div>
  </div>
</div>

Color Breakdown

Line

border-gray-200

#e5e7eb

Dot Active

bg-blue-600

#2563eb

Dot Complete

bg-green-500

#22c55e

Dot Inactive

bg-gray-300

#d1d5db

Date

text-gray-400

#9ca3af

Title

text-gray-900

#111827

Description

text-gray-500

#6b7280

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-gray-700 dark:text-white dark:text-gray-400

Use Cases

Company historyOrder trackingProject milestones

Browser Support

All modern browsers.

Related Recipes

Sidebar Navigation

nav - intermediate

Success Alert

div - beginner

Error Alert

div - beginner

Warning Alert

div - beginner

Info Toast

div - intermediate

Cookie Banner

div - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I make a horizontal timeline?▼

Change the border-l to border-t, use flex for horizontal layout, and position the dots on top instead of to the left.