Steps Horizontal

                    <ul class="flex w-full">
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-semibold">1</div>
    <div class="w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="text-sm mt-2 font-medium">Register</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-10 h-10 rounded-full bg-blue-600 text-white font-semibold">2</div>
    <div class="w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="text-sm mt-2 font-medium">Choose plan</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-10 h-10 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold">3</div>
    <div class="w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="text-sm mt-2 font-medium">Purchase</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-10 h-10 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold">4</div>
    <div class="w-full h-1 absolute top-5 bg-gray-200 -right-1/2"></div>
    <div class="text-sm mt-2 font-medium">Receive Product</div>
  </li>
</ul>