Timeline Component

This component is responsive for Mobile & Desktop & Dark mode Supported.

This tailwind example is contributed by Shariar Hasan, on 15-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Roadmap, Changelog

Timeline

Author Shariar Hasan

Tailwind v3.4 5k 12

Fork Fullscreen

<div class="w-full px-4 dark:text-white text-gray-900 dark:bg-gray-950 bg-gray-200">
	<div class="tree-wrapper relative md:w-[10px] min-h-[50vh] md:mx-auto ">
		<div
			class="flex md:flex-row flex-col md:items-center md:gap-2 group  relative top-0 md:left-1/2 md:right-1/2 md:even:translate-x-[-100%] even:translate-x-0 md:w-max w-full z-[1]">
			<div
				class="pointer p-4 dark:bg-gray-900 bg-gray-100 aspect-square w-[70px] flex items-center justify-center rounded-full md:group-even:order-2 group-even:order-none md:group-odd:-translate-x-1/2 md:translate-x-1/2 translate-x-0 mx-auto md:mx-0">
				HSC</div>
			<div class="details md:max-w-sm p-5 bg-gray-100 dark:bg-gray-900 rounded-md my-3">
				<div class="course-title">B.Sc.</div>
				<div class="institution">Feni Govt College</div>
				<div class="location">Feni, Bangladesh</div>
				<div class="starting-year">2015</div>
				<div class="graduation-year">2017</div>
				<div class="description">its a short journey of my educational life in the Feni Gov't college and i
					tried to use time best use of time in this short period</div>
				<div class="result">GPA 4.58</div>
			</div>
		</div>
		<div
			class="flex md:flex-row flex-col md:items-center md:gap-2 group  relative top-0 md:left-1/2 md:right-1/2 md:even:translate-x-[-100%] even:translate-x-0 md:w-max w-full z-[1]">
			<div
				class="pointer p-4 dark:bg-gray-900 bg-gray-100 aspect-square w-[70px] flex items-center justify-center rounded-full md:group-even:order-2 group-even:order-none md:group-odd:-translate-x-1/2 md:translate-x-1/2 translate-x-0 mx-auto md:mx-0">
				HSC</div>
			<div class="details md:max-w-sm p-5 bg-gray-100 dark:bg-gray-900 rounded-md my-3">
				<div class="course-title">B.Sc.</div>
				<div class="institution">Feni Govt College</div>
				<div class="location">Feni, Bangladesh</div>
				<div class="starting-year">2015</div>
				<div class="graduation-year">2017</div>
				<div class="description">its a short journey of my educational life in the Feni Gov't college and i
					tried to use time best use of time in this short period</div>
				<div class="result">GPA 4.58</div>
			</div>
		</div>
		<div
			class="flex md:flex-row flex-col md:items-center md:gap-2 group  relative top-0 md:left-1/2 md:right-1/2 md:even:translate-x-[-100%] even:translate-x-0 md:w-max w-full z-[1]">
			<div
				class="pointer p-4 dark:bg-gray-900 bg-gray-100 aspect-square w-[70px] flex items-center justify-center rounded-full md:group-even:order-2 group-even:order-none md:group-odd:-translate-x-1/2 md:translate-x-1/2 translate-x-0 mx-auto md:mx-0">
				HSC</div>
			<div class="details md:max-w-sm p-5 bg-gray-100 dark:bg-gray-900 rounded-md my-3">
				<div class="course-title">B.Sc.</div>
				<div class="institution">Feni Govt College</div>
				<div class="location">Feni, Bangladesh</div>
				<div class="starting-year">2015</div>
				<div class="graduation-year">2017</div>
				<div class="description">its a short journey of my educational life in the Feni Gov't college and i
					tried to use time best use of time in this short period</div>
				<div class="result">GPA 4.58</div>
			</div>
		</div>
	</div>
</div>

Related Examples

Timeline
Beautiful Tailwind timeline

Brandon D

4 years ago

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

Komal Jain

3 years ago

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

Anja Müller

3 years ago

13.4k
Event timeline

Laurits

3 years ago

17.9k
Stepper example
Explain How it works to your audience

Santos78

3 years ago

15.9k
Timeline
Timeline for tracking status of the things

Akshay

4 years ago

11.8k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k
Project Roadmap Timeline with Status Filters
A clean, responsive project timeline featuring milestone cards, completion statuses, dates and interactive filters. Ideal for project management dashboards and SaaS applications.

JUGENDRA GANGWAR

6 days ago

12
Dark mode with Tailwind CSS and alpinjs

Michael Andreuzza

2 years ago

4.1k
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
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

3.1k
Sticky Changelog

Michael Andreuzza

2 years ago

3.2k