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

11.7k

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

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

Author:
Anja Müller

1 year ago

9.1k
Event timeline

Author:
Laurits

1 year ago

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

Author:
Komal Jain

1 year ago

9.1k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

2 years ago

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

Author:
Noob

2 years ago

18.2k
Responsive list with 3 columns

Author:
TailwindFlex

1 year ago

11.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

12.4k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

9.3k
Responsive list with icons

Author:
Prajwal Hallale

1 year ago

10.1k
Bullet points list
for sections like "Why Choose Us"

Author:
Orson Kincaid

1 month ago

364
List section
Beautiful list section with left border

Author:
Leon Bachmann

1 year ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent