Home
Laurits
Event timeline

Event timeline

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

Timeline

Author Laurits

17.5k

Fork Fullscreen

<div class="container mx-auto px-4 py-8">
    <div class="relative wrap overflow-hidden">
        <div class="border-2-2 absolute border-opacity-20 border-gray-700 h-full border left-1/2"></div>
        <div class="mb-8 flex justify-between items-center w-full right-timeline">
            <div class="order-1 w-5/12"></div>
            <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-12 h-12 rounded-full">
                <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
            </div>
            <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
                <h3 class="mb-3 font-bold text-gray-800 text-xl">Event Title</h3>
                <p class="text-gray-700 leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Vestibulum in nisi commodo, aliquet velit ac, dapibus elit.</p>
            </div>
        </div>
        <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
            <div class="order-1 w-5/12"></div>
            <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-12 h-12 rounded-full">
                <h1 class="mx-auto font-semibold text-lg text-white">2</h1>
            </div>
            <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
                <h3 class="mb-3 font-bold text-gray-800 text-xl">Event Title</h3>
                <p class="text-gray-700 leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Vestibulum in nisi commodo, aliquet velit ac, dapibus elit.</p>
            </div>
        </div>
        <div class="mb-8 flex justify-between items-center w-full right-timeline">
            <div class="order-1 w-5/12"></div>
            <div class="z-20 flex items-center order-1 bg-gray-800 shadow-xl w-12 h-12 rounded-full">
                <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
            </div>
            <div class="order-1 bg-gray-400 rounded-lg shadow-xl w-5/12 px-6 py-4">
                <h3 class="mb-3 font-bold text-gray-800 text-xl">Event Title</h3>
                <p class="text-gray-700 leading-tight">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Vestibulum in nisi commodo, aliquet velit ac, dapibus elit.</p>
            </div>
        </div>
    </div>
</div>

Related Examples

Timeline
Beautiful Tailwind timeline

Author:
Brandon D

3 years ago

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

Author:
Komal Jain

2 years ago

12.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

3 years ago

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

Author:
Anja Müller

2 years ago

13.1k
Event timeline list

Author:
Laurits

3 years ago

13.7k
Timeline
Timeline for tracking status of the things

Author:
Akshay

3 years ago

11.4k
Image carousel
Uses Flowbite

Author:
Fagundo67

3 years ago

31.6k
Timeline Component
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

2 years ago

4.5k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.4k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Author:
Omer fils ELENGA

3 months ago

451
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.6k
Timeline
timeline with journey

Author:
Abhiraj

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components