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

16.1k

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

2 years ago

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

Author:
Komal Jain

1 year ago

10.7k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

Author:
Anja Müller

1 year ago

11.2k
Event timeline list

Author:
Laurits

2 years ago

12.6k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

10.4k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

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

Author:
Shariar Hasan

1 year ago

3.3k
Contact me form
contact me form

Author:
Geoffrey Callaghan

1 year ago

6.4k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

1.6k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

9.5k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

4 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components