Timeline Component

CSS-only Tailwind CSS timeline for chronological event lists. Vertical layout with icon, content, and connector line slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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

Jan 2024

Project started

Initial commit pushed
Apr 2024

Beta released

Open testing begins
Today

v2.0 launched

Tailwind v4 rewrite

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul className="timeline timeline-vertical">
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Jan 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Project started</div>
      <div className="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Apr 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Beta released</div>
      <div className="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Today</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">v2.0 launched</div>
      <div className="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

Xem mã

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ó.

Step 1

Primary
Step 2

Secondary
Step 3

Success
Step 4

Warning
Step 5

Error

<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>

Xem mã

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.

Design phase

Jan 2024
Development

Mar 2024
Testing

May 2024
Launch

Jun 2024

<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>

Xem mã

Đầ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.

Planned

Backlog item created
In Progress

Development started
In Review

Awaiting approval
Done

Shipped to production

<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>

Xem mã

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.

Requirements gathered

Jan 2024
Prototype built

Feb 2024
Shipped

Mar 2024

<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>

Xem mã

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.

Launched beta

February 2024
Public release

April 2024

<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>

Xem mã

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ẻ.

Jan 15, 2024

Project Kickoff

Team assembled, goals defined, and roadmap approved by stakeholders.
Mar 1, 2024

Alpha Released

Internal testing began with 12 pilot users across 3 departments.
Jun 10, 2024

v1.0 General Availability

Public launch with full documentation, support, and SLA guarantees.

<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>

Xem mã

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.

Launched beta

February 2024
Public release

April 2024

<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>

Xem mã

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.

Launched beta

February 2024
Public release

April 2024

<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>

Xem mã

Badge
Steps

Timeline Component

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

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

Bên thay thế

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

Chỉ bên bắt đầu

Chỉ mặt cuối

Nội dung thẻ Rich

Bắt đầu nhanh

Kết thúc nhanh

Có liên quan