1. Components
  2. Timeline

Components

Tailwind CSS Timeline

The Timeline Component is designed to display events in chronological order, ideal for showcasing history, project milestones, or event sequences.

Basic usage

A basic timeline usage with title, description and users.

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉

Collapsable

Collapsable timeline to hide/show more contents.

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉

Hoverable rows

For timelines that contain a lot of information, this allows to hover over the rows to see more information.

1 Aug, 2023

Created "Preline in React" task

Find more detailed insctructions here.

Release v5.2.0 quick bug fix 🐞

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉

With time

With time on the left side.

12:05PM

Created "Preline in React" task

Find more detailed insctructions here.

12:05PM

Release v5.2.0 quick bug fix 🐞

12:05PM

Marked "Install Charts" completed

Finally! You can check it out here.

12:05PM

Take a break ⛳️

Just chill for now... 😉

Icons and avatars

You can also add additional elements, such as icons and avatars.

1 Aug, 2023

Avatar

Created "Preline in React" task

Find more detailed insctructions here.

A

Release v5.2.0 quick bug fix 🐞

Avatar

Marked "Install Charts" completed

Finally! You can check it out here.

31 Jul, 2023

Take a break ⛳️

Just chill for now... 😉