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

11.6k

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

2 years ago

12.5k
Timeline
Beautiful Tailwind timeline

Author:
Brandon D

3 years ago

16.2k
Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

14.8k
Event timeline

Author:
Laurits

2 years ago

17k
Timeline
Timeline for tracking status of the things

Author:
Akshay

3 years ago

11.1k
Event timeline list

Author:
Laurits

2 years ago

13.2k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

Author:
Shariar Hasan

1 year ago

4k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

1 year ago

3.4k
Sticky Changelog

Author:
Michael Andreuzza

1 year ago

2.1k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

10 months ago

1.8k
Timeline
timeline with journey

Author:
Abhiraj

10 months ago

997

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components