Event timeline

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

Timeline

Author Laurits

Tailwind v3.4 17.8k 11

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

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
Stepper example
Explain How it works to your audience

Santos78

3 years ago

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

Anja Müller

2 years ago

13.3k
Event timeline list

Laurits

3 years ago

14k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.7k
Image carousel
Uses Flowbite

Fagundo67

3 years ago

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

Shariar Hasan

2 years ago

4.9k
Contact me form
contact me form

Geoffrey Callaghan

2 years ago

7.6k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

8 months ago

831
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k