Home
Komal Jain
Event Timeline

Event Timeline

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

This tailwind example is contributed by Komal Jain, on 12-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author Komal Jain

10.4k

Fork Fullscreen

<div class="bg-indigo-700 p-4">
    <h2 class="text-3xl text-white font-bold mb-12">Chronology</h2>
    <div class="flex flex-col grid-cols-9 p-2 mx-auto md:grid">
        <div class="flex md:contents flex-row-reverse">
            <div
                class="relative p-4 my-6 text-gray-800 bg-white rounded-xl col-start-1 col-end-5 mr-auto md:mr-0 md:ml-auto">
                <h3 class="text-lg font-semibold lg:text-xl">New Event 1</h3>
                <p class="mt-2 leading-6">Description of the first event.</p>
                <span class="absolute text-sm text-indigo-100/75 -top-5 left-2 whitespace-nowrap">Date 1</span>
            </div>
            <div class="relative col-start-5 col-end-6 mr-7 md:mx-auto">
                <div class="flex items-center justify-center w-6 h-full">
                    <div class="w-1 h-full bg-indigo-300 rounded-t-full bg-gradient-to-b from-indigo-400 to-indigo-300">
                    </div>
                </div>
                <div class="absolute w-6 h-6 -mt-3 bg-white border-4 border-indigo-400 rounded-full top-1/2"></div>
            </div>
        </div>

<div class="flex md:contents">
            <div class="relative col-start-5 col-end-6 mr-7 md:mx-auto">
                <div class="flex items-center justify-center w-6 h-full">
                    <div class="w-1 h-full bg-indigo-300"></div>
                </div>
                <div class="absolute w-6 h-6 -mt-3 bg-white border-4 border-indigo-400 rounded-full top-1/2"></div>
            </div>
            <div class="relative p-4 my-6 text-gray-800 bg-white rounded-xl col-start-6 col-end-10 mr-auto">
                <h3 class="text-lg font-semibold lg:text-xl">New Event 2</h3>
                <p class="mt-2 leading-6">Description of the second event.</p>
                <span class="absolute text-sm text-indigo-100/75 -top-5 left-2 whitespace-nowrap">Date 2</span>
            </div>
        </div>

<div class="flex md:contents flex-row-reverse">
            <div
                class="relative p-4 my-6 text-gray-800 bg-white rounded-xl col-start-1 col-end-5 mr-auto md:mr-0 md:ml-auto">
                <h3 class="text-lg font-semibold lg:text-xl">New Event 3</h3>
                <p class="mt-2 leading-6">Description of the first event.</p>
                <span class="absolute text-sm text-indigo-100/75 -top-5 left-2 whitespace-nowrap">Date 3</span>
            </div>
            <div class="relative col-start-5 col-end-6 mr-7 md:mx-auto">
                <div class="flex items-center justify-center w-6 h-full">
                    <div class="w-1 h-full bg-indigo-300 rounded-t-full bg-gradient-to-b from-indigo-400 to-indigo-300">
                    </div>
                </div>
                <div class="absolute w-6 h-6 -mt-3 bg-white border-4 border-indigo-400 rounded-full top-1/2"></div>
            </div>
        </div>

<div class="flex md:contents">
            <div class="relative col-start-5 col-end-6 mr-7 md:mx-auto">
                <div class="flex items-center justify-center w-6 h-full">
                    <div class="w-1 h-full bg-indigo-300"></div>
                </div>
                <div class="absolute w-6 h-6 -mt-3 bg-white border-4 border-indigo-400 rounded-full top-1/2"></div>
            </div>
            <div class="relative p-4 my-6 text-gray-800 bg-white rounded-xl col-start-6 col-end-10 mr-auto">
                <h3 class="text-lg font-semibold lg:text-xl">New Event 4</h3>
                <p class="mt-2 leading-6">Description of the second event.</p>
                <span class="absolute text-sm text-indigo-100/75 -top-5 left-2 whitespace-nowrap">Date 4</span>
            </div>
        </div>

</div>
</div>

Related Examples

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

Author:
Anja Müller

1 year ago

10.8k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

2 years ago

15.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

13.7k
Event timeline

Author:
Laurits

2 years ago

16k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

10.3k
Event timeline list

Author:
Laurits

2 years ago

12.5k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

Author:
Shariar Hasan

1 year ago

3.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

5 months ago

1.1k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

11 months ago

2.3k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

3 months ago

1.2k
Sticky Changelog

Author:
Michael Andreuzza

11 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components