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.

Zaman çizelgesi bileşenleri bir dizi olayı, dönüm noktasını veya anlatı ilerlemesini kronolojik sırayla görüntüler. Anlamsal HTML ile oluşturulan zaman çizelgeleri, kullanıcıların tarihsel ilerlemeyi ve proje aşamalarını anlamalarına yardımcı olur. Frutjam zaman çizelgesi sistemi birden fazla yönü, rengi ve öğe stilini destekler; proje geçmişi, sürüm notları ve yolculuk haritaları için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf	Tip	Tanım
timeline	Temel	Kronolojik olayların sıralı listesi
timeline-item	Değiştirici	Bireysel olay satırı — her `<li>`'e yerleştirin
timeline-start	Değiştirici	Zaman çizelgesi ekseninin öncesine yerleştirilen içerik
timeline-middle	Değiştirici	Zaman çizelgesi ekseninde ortalanmış nokta
timeline-end	Değiştirici	Zaman çizelgesi ekseninden sonra yerleştirilen içerik
timeline-horizontal	Değiştirici	Yatay düzen
timeline-vertical	Değiştirici	Dikey düzen (varsayılan)
timeline-snap-start	Değiştirici	Başlangıç sütununu gizler; nokta sol kenara hizalanır
timeline-snap-end	Değiştirici	Son sütunu gizler; nokta sağ kenara hizalanır
timeline-primary	Renk	Ana renk noktası ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-secondary	Renk	İkincil renk noktası ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-accent	Renk	Vurgu renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-neutral	Renk	Nötr renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-info	Renk	Bilgi renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-success	Renk	Başarılı renkli nokta ve bağlayıcı — `timeline-item`'e yerleştirin
timeline-warning	Renk	Uyarı renkli noktası ve bağlayıcı — `timeline-item` üzerine yerleştirin
timeline-error	Renk	Renkli nokta ve bağlayıcı hatası — `timeline-item`'e yerleştirin

Temel Kullanım

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>

Kodu Görüntüle

Renklerle Zaman Çizelgesi

Noktasını ve ondan çıkan bağlayıcı çizgiyi renklendirmek için her zaman çizelgesi öğesine bir renk değiştirici ekleyin.

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>

Kodu Görüntüle

Alternatif Taraflar

Zikzak bir düzen oluşturmak için her öğedeki içeriği zaman çizelgesi-başlangıç ve zaman çizelgesi-bitiş arasında değiştirin.

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>

Kodu Görüntüle

İki Tonlu Konektörler

Her öğenin bağlantı çizgisi, rengini devralır ve farklı renkli adımlar arasında kusursuz geçişler oluşturur.

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>

Kodu Görüntüle

Yalnızca Başlangıç Tarafı

Her şeyi eksenin soluna itmek için içeriği yalnızca timeline-start'a boş bir timeline-end ile yerleştirin.

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>

Kodu Görüntüle

Yalnızca Uç Taraf

Tüm içerik sağda olacak şekilde noktayı sol kenara itmek için timeline-snap-start komutunu kullanın.

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>

Kodu Görüntüle

Zengin Kart İçeriği

Her zaman çizelgesi etkinliğine kart benzeri bir görünüm kazandırmak için içeriği bir kenarlık yuvarlatılmış kutu p-3 bloğuna sarın.

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>

Kodu Görüntüle

Hızlı Başlangıç

Başlangıç sütununu gizlemek ve noktayı sol kenara hizalamak için listede timeline-snap-start komutunu kullanın.

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>

Kodu Görüntüle

Yapış Sonu

Bitiş sütununu gizlemek ve noktayı sağ kenara hizalamak için listede timeline-snap-end komutunu kullanın.

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>

Kodu Görüntüle

Badge
Steps

Timeline Component

Temel Kullanım

Renklerle Zaman Çizelgesi

Alternatif Taraflar

İki Tonlu Konektörler

Yalnızca Başlangıç ​​Tarafı

Yalnızca Uç Taraf

Zengin Kart İçeriği

Hızlı Başlangıç

Yapış Sonu

İlgili

Yalnızca Başlangıç Tarafı