Stepper Vertical Using Tailwind UI
A Vertical Stepper component designed with Tailwind provides a visually organized and step-by-step guide for users to navigate through a process or complete tasks with clarity and ease.
steps
Loading component...
120 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/14012793-Stepper-Components -->
<div class="p-4 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
<div
class="grid gap-6 row-gap-10 p-10 lg:grid-cols-3 rounded-3xl bg-gradient-to-br from-gray-300 via-gray-300 to-gray-400">
<div
class="py-10 pl-10 border-8 border-white rounded-2xl bg-gradient-to-b from-gray-200 via-gray-200 to-gray-100">
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 bg-green-600 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pt-1 pb-8">
<p class="text-xs font-medium text-gray-700 uppercase">
STEP 1
</p>
<p class="mb-2 text-lg font-bold">Basic Details</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 bg-green-600 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pt-1 pb-8">
<p class="text-xs font-medium text-gray-700 uppercase">
STEP 2
</p>
<p class="mb-2 text-lg font-bold">Company Details</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div
class="flex items-center justify-center w-10 h-10 bg-blue-600 border-2 border-white rounded-full ring-1 ring-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pt-1 pb-8">
<p class="text-xs font-medium text-gray-700 uppercase">
STEP 3
</p>
<p class="mb-2 text-lg font-bold">Subcribe Plan</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border border-gray-400 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" />
</svg>
</div>
</div>
<div class="w-px h-full bg-gray-300"></div>
</div>
<div class="pt-1 pb-8">
<p class="text-xs font-medium text-gray-700 uppercase">
STEP 4
</p>
<p class="mb-2 text-lg font-bold">Payment Details</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col items-center mr-4">
<div>
<div class="flex items-center justify-center w-10 h-10 border border-gray-400 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 text-gray-600">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3" />
</svg>
</div>
</div>
</div>
<div class="pt-1">
<p class="mb-2 text-lg font-bold">Success</p>
</div>
</div>
</div>
</div>
</div>