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

15.8k

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.1k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Author:
Komal Jain

1 year ago

10.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

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

Author:
Anja Müller

1 year ago

10.6k
Event timeline list

Author:
Laurits

2 years ago

12.3k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

10.1k
Image carousel
Uses Flowbite

Author:
Fagundo67

2 years ago

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

Author:
Shariar Hasan

1 year ago

3.1k
Contact me form
contact me form

Author:
Geoffrey Callaghan

1 year ago

6.1k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

10 months ago

2.2k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

4 months ago

989
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

9.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components