A timeline is a useful way to display a whole range of information and or data points to a user. Companies use them to showcase their existence across time and what they have done over the years and people can use them to display their portfolio work across time as well
| Background | Border | Active | Inactive | |
|---|---|---|---|---|
| Color Code in Tailwind | bg-gray-600 | border-gray-200 | bg-green-400 | bg-blue-600 |
Color of text will depend on the bg color
| Background | Dark | Light |
|---|---|---|
| Text | Light | Dark |
| Code in Tailwind | text-white | text-gray-900 |
Note : Color of the text [color] will depend on the color of the background
For all Timeline font is : font-medium
Mostly all the icons are taken from → Hero Icons
Icon-text-gap : We follow a convention of equal margin between the text and the icon as padding in y axis py. and always the margin is given from the side of icon.
| Width | Type | |
|---|---|---|
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |
Want to see this Avatar in action? Try copy pasting this code in Tailwind Playground. 💥
<!--For Timeline-1 -->
<div class="flex h-screen w-screen items-center justify-center p-10">
<div class="mx-auto grid w-full max-w-7xl grid-cols-5 sm:grid-cols-9">
<!-- --first content---- -->
<div class="col-span-4 h-full mb-4">
<div class="rounded-md p-4 shadow-lg">
<h1 class="py-2 px-2 text-xl font-medium text-gray-900">Heading 1</h1>
<p class="py-1 px-2 text-sm text-gray-800">This is the first heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center row-start-1 sm:col-start-5">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<!-- -----second content-------- -->
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full mb-4">
<div class="rounded-md p-4 shadow-lg">
<h1 class="py-2 px-2 text-xl font-medium text-gray-900">Heading 2</h1>
<p class="py-1 px-2 text-sm text-gray-800">This is the second heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<!-- -----third content-------- -->
<div class="col-span-4 h-full mb-4">
<div class="rounded-md p-4 shadow-lg">
<h1 class="py-2 px-2 text-xl font-medium text-gray-900">Heading 3</h1>
<p class="py-1 px-2 text-sm text-gray-800">This is the third heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center row-start-3 sm:col-start-5">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<!-- ----fourth content-------- -->
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full">
<div class="rounded-md p-4 shadow-lg">
<h1 class="py-2 px-2 text-xl font-medium text-gray-900">Heading 4</h1>
<p class="py-1 px-2 text-sm text-gray-800">This is the fourth heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
</div>
</div>
<!-- dark mode version -->
<div class="flex h-screen w-screen items-center justify-center p-10">
<div class="mx-auto grid w-full max-w-7xl grid-cols-5 sm:grid-cols-9">
<!-- --first content---- -->
<div class="col-span-4 h-full mb-4 rounded-md">
<div class="rounded-md p-4 shadow-lg dark:bg-gray-600 bg-blue-600">
<h1 class="py-2 px-2 text-xl font-medium dark:text-white text-black">Heading 1</h1>
<p class="py-1 px-2 text-sm dark:text-white text-black">This is the first heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center row-start-1 sm:col-start-5">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<!-- -----second content-------- -->
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full mb-4 rounded-md">
<div class="rounded-md p-4 shadow-lg dark:bg-gray-600 bg-blue-600">
<h1 class="py-2 px-2 text-xl font-medium dark:text-white text-black">Heading 2</h1>
<p class="py-1 px-2 text-sm dark:text-white text-black">This is the second heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<!-- -----third content-------- -->
<div class="col-span-4 h-full mb-4 rounded-md">
<div class="rounded-md p-4 shadow-lg dark:bg-gray-600 bg-blue-600">
<h1 class="py-2 px-2 text-xl font-medium dark:text-white text-black">Heading 3</h1>
<p class="py-1 px-2 text-sm dark:text-white text-black">This is the third heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center row-start-3 sm:col-start-5">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<!-- ----fourth content-------- -->
<div class="col-span-4 h-full w-full hidden sm:block"></div>
<div class="relative col-span-1 flex h-full w-full items-center justify-center">
<div class="h-full w-1 bg-blue-600"></div>
<div class="absolute z-10 h-4 w-4 items-center rounded-full bg-blue-600"></div>
</div>
<div class="col-span-4 h-full rounded-md">
<div class="rounded-md p-4 shadow-lg dark:bg-gray-600 bg-blue-600">
<h1 class="py-2 px-2 text-xl font-medium dark:text-white text-black">Heading 4</h1>
<p class="py-1 px-2 text-sm dark:text-white text-black">This is the fourth heading in the timeline graph we use to
show the progress among developer</p>
</div>
</div>
</div>
</div>
<!--For Timeline-2 -->
<div class="flex flex-col gap-6 p-10 md:flex-row">
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg bg-blue-600 text-white">
<p class="text-sm text-white/60"><b>01.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 1</h4>
<p class="text-white/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg bg-blue-600 text-white">
<p class="text-sm text-white/60"><b>02.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 2</h4>
<p class="text-white/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg bg-blue-600 text-white">
<p class="text-sm text-white/60"><b>03.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 3</h4>
<p class="text-white/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
</div>
<!-- dark mode version -->
<div class="flex flex-col gap-6 p-10 md:flex-row">
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg dark:bg-gray-600 dark:text-white text-black bg-blue-600">
<p class="text-sm dark:text-white text-black/60"><b>01.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 1</h4>
<p class="dark:text-white text-black/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg dark:bg-gray-600 dark:text-white text-black bg-blue-600">
<p class="text-sm dark:text-white text-black/60"><b>02.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 2</h4>
<p class="dark:text-white text-black/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
<div class="flex flex-col justify-center gap-2 rounded-3xl border px-6 py-6 shadow-lg dark:bg-gray-600 dark:text-white text-black bg-blue-600">
<p class="text-sm dark:text-white text-black/60"><b>03.07.2022</b></p>
<h4 class="text-xl font-semibold">Title of section 3</h4>
<p class="dark:text-white text-black/80">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque scelerisque diam non nisi
semper, et elementum lorem ornare. Maecenas placerat facilisis mollis. Duis sagittis ligula in sodales vehicula.
</p>
</div>
</div>
If you still have a problem understanding this please join our discord server to get help.