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

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.5k
Event Timeline
Timeline component for tracking the progression of events over time. It features alternating card sections

Author:
Komal Jain

1 year ago

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

Author:
Anja Müller

1 year ago

9.9k
Event timeline

Author:
Laurits

1 year ago

15.4k
Stepper example
Explain How it works to your audience

Author:
Santos78

1 year ago

13.1k
Timeline
Timeline for tracking status of the things

Author:
Akshay

2 years ago

9.6k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

8 months ago

1.8k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 week ago

229
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

2 months ago

578
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

1 year ago

8.8k
Timeline
timeline with journey

Author:
Abhiraj

1 week ago

21
Event timeline list

Author:
Laurits

2 years ago

12k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components