Steps Vertical

                    <ul class="flex flex-col space-y-6 w-full max-w-md mx-auto">
  <li class="relative flex">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white font-semibold text-sm">1</div>
    <div class="absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <div class="ml-4 flex flex-col">
      <span class="font-medium">Register</span>
      <span class="text-sm text-gray-500">Create your account to get started</span>
    </div>
  </li>
  <li class="relative flex">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white font-semibold text-sm">2</div>
    <div class="absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <div class="ml-4 flex flex-col">
      <span class="font-medium">Choose plan</span>
      <span class="text-sm text-gray-500">Select the best plan for your needs</span>
    </div>
  </li>
  <li class="relative flex">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold text-sm">3</div>
    <div class="absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <div class="ml-4 flex flex-col">
      <span class="font-medium">Purchase</span>
      <span class="text-sm text-gray-500">Complete your purchase securely</span>
    </div>
  </li>
  <li class="relative flex">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold text-sm">4</div>
    <div class="ml-4 flex flex-col">
      <span class="font-medium">Receive Product</span>
      <span class="text-sm text-gray-500">Get your product delivered to you</span>
    </div>
  </li>
</ul>