---
title: "Timeline"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Timeline for chronological events, milestones, and process steps. Vertical and horizontal layouts with icons and connectors for history UIs."
url: https://frutjam.com/vi/components/timeline
---

# Timeline Component

Các thành phần dòng thời gian hiển thị một chuỗi các sự kiện, cột mốc quan trọng hoặc tiến trình tường thuật theo thứ tự thời gian. Được xây dựng bằng HTML ngữ nghĩa, các mốc thời gian giúp người dùng hiểu được tiến trình lịch sử và các giai đoạn của dự án. Hệ thống dòng thời gian Frutjam hỗ trợ nhiều hướng, màu sắc và kiểu vật phẩm — lý tưởng cho lịch sử dự án, ghi chú phát hành và bản đồ hành trình.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học             | Kiểu            | Sự miêu tả                                                          |
| ------------------- | --------------- | ------------------------------------------------------------------- |
| timeline            | Căn cứ          | Danh sách sắp xếp các sự kiện theo trình tự thời gian               |
| timeline-item       | Công cụ sửa đổi | Hàng sự kiện riêng lẻ — đặt trên mỗi `<li>`                         |
| timeline-start      | Công cụ sửa đổi | Nội dung được đặt trước trục dòng thời gian                         |
| timeline-middle     | Công cụ sửa đổi | Dấu chấm được căn giữa trên trục dòng thời gian                     |
| timeline-end        | Công cụ sửa đổi | Nội dung được đặt sau trục dòng thời gian                           |
| timeline-horizontal | Công cụ sửa đổi | Bố cục ngang                                                        |
| timeline-vertical   | Công cụ sửa đổi | Bố cục dọc (mặc định)                                               |
| timeline-snap-start | Công cụ sửa đổi | Ẩn cột bắt đầu - dấu chấm thẳng hàng với cạnh trái                  |
| timeline-snap-end   | Công cụ sửa đổi | Ẩn cột cuối - dấu chấm căn chỉnh với cạnh phải                      |
| timeline-primary    | Màu sắc         | Dấu chấm và đường kết nối màu chính — đặt trên `timeline-item`      |
| timeline-secondary  | Màu sắc         | Dấu chấm và đầu nối màu phụ — đặt trên `mục thời gian`              |
| timeline-accent     | Màu sắc         | Dấu chấm màu nhấn và đường kết nối — đặt trên `timeline-item`       |
| timeline-neutral    | Màu sắc         | Dấu chấm và đầu nối màu trung tính — đặt trên `timeline-item`       |
| timeline-info       | Màu sắc         | Dấu chấm màu thông tin và đường kết nối — đặt trên `mục thời gian`  |
| timeline-success    | Màu sắc         | Dấu chấm và đường kết nối màu thành công — đặt trên `mục thời gian` |
| timeline-warning    | Màu sắc         | Dấu chấm màu cảnh báo và trình kết nối — đặt trên `timeline-item`   |
| timeline-error      | Màu sắc         | Lỗi dấu chấm màu và đường kết nối — đặt trên `mục thời gian`        |

## Cách sử dụng cơ bản

## Dòng thời gian có màu sắc

Thêm công cụ sửa đổi màu cho mỗi `mục thời gian` để tô màu cho dấu chấm của nó và đường kết nối kéo theo nó.

```html
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>
```

## Bên thay thế

Thay thế nội dung giữa `timeline-start` và `timeline-end` trên mỗi mục để tạo bố cục ngoằn ngoèo.

```html
<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>
```

## Đầu nối hai tông màu

Đường kết nối của mỗi mục kế thừa màu của nó, tạo ra sự chuyển tiếp liền mạch giữa các bước có màu khác nhau.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>
```

## Chỉ bên bắt đầu

Chỉ đặt nội dung trong `timeline-start` với `timeline-end` trống để đẩy mọi thứ sang bên trái trục.

```html
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>
```

## Chỉ mặt cuối

Sử dụng `timeline-snap-start` để đẩy dấu chấm sang cạnh trái với tất cả nội dung ở bên phải.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>
```

## Nội dung thẻ Rich

Gói nội dung trong khối `hộp tròn viền p-3` để mang lại cho mỗi sự kiện dòng thời gian một diện mạo giống như thẻ.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>
```

## Bắt đầu nhanh

Sử dụng `timeline-snap-start` trên danh sách để ẩn cột bắt đầu và căn chỉnh dấu chấm về cạnh trái.

```html
<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>
```

## Kết thúc nhanh

Sử dụng `timeline-snap-end` trên danh sách để ẩn cột kết thúc và căn chỉnh dấu chấm về cạnh phải.

```html
<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>
```