Back to application components
Timelines
Timeline components for visualizing project roadmaps, company histories, event sequences, and progress tracking with responsive designs.
3/3 Dark Mode Updated: N/ANo commit information available.
<ol
class="relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200"
>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">12/02/2025</time>
<h3 class="text-lg font-bold text-gray-900">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">15/03/2025</time>
<h3 class="text-lg font-bold text-gray-900">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">24/04/2025</time>
<h3 class="text-lg font-bold text-gray-900">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
</ol><ol
class="relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700"
>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">12/02/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">15/03/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -ms-1.5 flex items-start gap-4">
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">24/04/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
</ol><ol
class="relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200"
>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">12/02/2025</time>
<h3 class="text-lg font-bold text-gray-900">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">5/03/2025</time>
<h3 class="text-lg font-bold text-gray-900">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700">24/04/2025</time>
<h3 class="text-lg font-bold text-gray-900">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
</ol><ol
class="relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700"
>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200"
>12/02/2025</time
>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">5/03/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
<li class="group relative grid grid-cols-2 odd:-me-3 even:-ms-3">
<div
class="relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last"
>
<span class="size-3 shrink-0 rounded-full bg-blue-600"></span>
<div class="-mt-2">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200"
>24/04/2025</time
>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</div>
<div aria-hidden="true"></div>
</li>
</ol><ol
class="relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200"
>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700">12/02/2025</time>
<h3 class="text-lg font-bold text-gray-900">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700">15/03/2025</time>
<h3 class="text-lg font-bold text-gray-900">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700">24/04/2025</time>
<h3 class="text-lg font-bold text-gray-900">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
</ol><ol
class="relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200 dark:before:bg-gray-700"
>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">12/02/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Kickoff</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">15/03/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">First Milestone</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
<li class="relative -mt-1.5">
<span class="block size-3 rounded-full bg-blue-600"></span>
<div class="mt-4">
<time class="text-xs/none font-medium text-gray-700 dark:text-gray-200">24/04/2025</time>
<h3 class="text-lg font-bold text-gray-900 dark:text-white">Launch</h3>
<p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis tempora ipsum
adipisci tenetur sunt quae exercitationem sed pariatur porro!
</p>
</div>
</li>
</ol>