Event timeline list

This tailwind example is contributed by Laurits, on 21-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline List

Author Laurits

Tailwind v3.4 14k 11

Fork Fullscreen

<div class="max-w-5xl mx-auto mt-8">
    <div class="border-l-2 border-gray-500 pl-8">
        <div class="flex flex-col md:flex-row md:justify-between">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-bold mb-2">Event 1</h3>
                <p class="text-gray-600 text-sm">Date: January 1, 2022</p>
            </div>
            <p class="text-gray-700">Some description goes here...</p>
        </div>
        <div class="flex flex-col md:flex-row md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-bold mb-2">Event 2</h3>
                <p class="text-gray-600 text-sm">Date: February 1, 2022</p>
            </div>
            <p class="text-gray-700">Some description goes here...</p>
        </div>
        <div class="flex flex-col md:flex-row md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-bold mb-2">Event 3</h3>
                <p class="text-gray-600 text-sm">Date: March 1, 2022</p>
            </div>
            <p class="text-gray-700">Some description goes here...</p>
        </div>
        <div class="flex flex-col md:flex-row md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-bold mb-2">Event 4</h3>
                <p class="text-gray-600 text-sm">Date: April 1, 2022</p>
            </div>
            <p class="text-gray-700">Some description goes here...</p>
        </div>
    </div>
</div>

Related Examples

Stacked list

Odessa Young

3 years ago

19.9k
Timeline | Roadmap example
Display Recent Updates, Timeline or Rroadmap with this component

Anja Müller

3 years ago

13.3k
Event timeline

Laurits

3 years ago

17.8k
Timeline
Beautiful Tailwind timeline

Brandon D

3 years ago

17.3k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Komal Jain

2 years ago

12.8k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.7k
Responsive list with 3 columns

TailwindFlex

3 years ago

14.3k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.8k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Responsive list with icons

Prajwal Hallale

3 years ago

10.6k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k