Home
Laurits
Event timeline list

Event timeline list

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

Timeline List

Author Laurits

12.2k

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

Author:
Odessa Young

1 year ago

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

Author:
Anja Müller

1 year ago

10.5k
Event timeline

Author:
Laurits

2 years ago

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

Author:
Komal Jain

1 year ago

10.1k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

2 years ago

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

Author:
Noob

2 years ago

19.4k
Responsive list with 3 columns

Author:
TailwindFlex

2 years ago

12.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

13.4k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

10k
Responsive list with icons

Author:
Prajwal Hallale

2 years ago

10.2k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 month ago

872
Timeline
timeline with journey

Author:
Abhiraj

1 month ago

368

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components