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 v3.4. It is responsive. similar terms for this example are Roadmap, Changelog

Timeline

Author Komal Jain

Tailwind v3.4 12.8k 12

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

Anja Müller

2 years ago

13.3k
Timeline
Beautiful Tailwind timeline

Brandon D

3 years ago

17.3k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.8k
Event timeline

Laurits

3 years ago

17.8k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.7k
Event timeline list

Laurits

3 years ago

14k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

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

Shariar Hasan

2 years ago

4.9k
Sticky Changelog

Michael Andreuzza

2 years ago

3.1k
Timeline
timeline with journey

Abhiraj

1 year ago

1.6k
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

3.9k
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.

Coastal UI

1 year ago

2.8k