Roadmap Horizontal - Tailwind Component
A responsive roadmap horizontal is a strategic plan that defines a goal or desired outcome and includes the major steps or milestones needed to reach it.
roadmap
Loading component...
98 lines
<div class=" hidden sm:block mt-52">
<div class="absolute flex-wrap content-end w-full flex justify-center">
<div class="flex flex-wrap content-end absolute justify-center h-full w-full">
<div class="z-10 flex justify-center mb-6 h-2 w-8/12 bg-gray-500 rounded-full"></div>
</div>
<div class="z-20 mb-1 w-9/12 grid grid-cols-5 gap-1 ">
<div class="flex justify-center ">
<div class="flex justify-center text-white rounded-full w-12 h-12 bg-indigo-600">
<div class="flex flex-wrap content-center">2016</div>
</div>
<div
class="absolute mt-24 bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">
Lorem ipsum dolor sit.</div>
</div>
<div class="flex justify-center ">
<div class="flex justify-center text-white rounded-full w-12 h-12 bg-red-600">
<div class="flex flex-wrap content-center">2017</div>
</div>
<div
class="absolute -mt-24 bg-indigo-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-indigo-500">
Lorem ipsum dolor sit.</div>
</div>
<div class="flex justify-center">
<div class="flex justify-center text-white rounded-full w-12 h-12 bg-indigo-600">
<div class="flex flex-wrap content-center">2018</div>
</div>
<div
class="absolute mt-24 bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">
Lorem ipsum dolor sit.</div>
</div>
<div class="flex justify-center ">
<div class="flex justify-center text-white rounded-full w-12 h-12 bg-red-600">
<div class="flex flex-wrap content-center">2019</div>
</div>
<div
class="absolute -mt-24 bg-indigo-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-indigo-500">
Lorem ipsum dolor sit.</div>
</div>
<div class="flex justify-center ">
<div class="flex justify-center text-white rounded-full w-12 h-12 bg-indigo-600">
<div class="flex flex-wrap content-center">2020</div>
</div>
<div
class="absolute mt-24 bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">
Lorem ipsum dolor sit.</div>
</div>
</div>
</div>
</div>
<div class="relative wrap overflow-hidden p-16 h-full sm:hidden">
<div class="absolute rounded-full h-3/4 w-2 bg-gray-400 sm:left-1/2 left-10"></div>
<div class="mb-4 flex justify-between items-center w-full">
<div class="z-20 flex items-center order-1 bg-indigo-600 shadow-xl w-12 h-12 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">2016</h1>
</div>
<div class="order-1 sm:w-5/12 w-10/12">
<div class=" bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">Lorem ipsum
dolor sit.</div>
</div>
</div>
<div class="mb-4 flex justify-between sm:flex-row-reverse items-center w-full">
<div class="z-20 flex items-center order-1 bg-red-600 shadow-xl w-12 h-12 rounded-full">
<h1 class="mx-auto text-white font-semibold text-lg">2017</h1>
</div>
<div class="order-1 sm:w-5/12 w-10/12">
<div class=" bg-indigo-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-indigo-500">Lorem
ipsum dolor sit.</div>
</div>
</div>
<div class="mb-4 flex justify-between items-center w-full">
<div class="z-20 flex items-center order-1 bg-indigo-600 shadow-xl w-12 h-12 rounded-full">
<h1 class="mx-auto font-semibold text-lg text-white">2018</h1>
</div>
<div class="order-1 sm:w-5/12 w-10/12">
<div class=" bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">Lorem ipsum
dolor sit.</div>
</div>
</div>
<div class="mb-4 flex justify-between sm:flex-row-reverse items-center w-full ">
<div class="z-20 flex items-center order-1 bg-red-600 shadow-xl w-12 h-12 rounded-full">
<h1 class="mx-auto text-white font-semibold text-lg">2019</h1>
</div>
<div class="order-1 sm:w-5/12 w-10/12">
<div class=" bg-indigo-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-indigo-500">Lorem
ipsum dolor sit.</div>
</div>
</div>
<div class="mb-4 flex justify-between sm:flex-row-reverse items-center w-full ">
<div class="z-20 flex items-center order-1 bg-indigo-600 shadow-xl w-12 h-12 rounded-full">
<h1 class="mx-auto text-white font-semibold text-lg">2020</h1>
</div>
<div class="order-1 sm:w-5/12 w-10/12">
<div class=" bg-red-400 w-28 px-2 py-2 text-center text-sm border-2 rounded shadow-lg border-red-500">Lorem ipsum
dolor sit.</div>
</div>
</div>
</div>
<div class="py-24"></div>