Home
Shariar Hasan
Timeline Component

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

Timeline

Author Shariar Hasan

2.8k

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

Author:
Brandon D

2 years ago

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

Author:
Komal Jain

1 year ago

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

Author:
Anja Müller

1 year ago

10.4k
Event timeline

Author:
Laurits

2 years ago

15.6k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

13.3k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

9.9k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

9 months ago

2k
Event timeline list

Author:
Laurits

2 years ago

12.1k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 month ago

626
Sticky Changelog

Author:
Michael Andreuzza

9 months ago

1.4k
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

4 weeks ago

242
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

1 year ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components