Steps Responsive

                    <ul class="flex flex-col lg:flex-row w-full max-w-4xl mx-auto">
  <!-- Vertical on mobile, horizontal on larger screens -->
  <li class="relative flex lg:flex-col items-start lg:items-center mb-6 lg:mb-0 lg:flex-1">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-blue-600 text-white font-semibold">1</div>
    <!-- Line for vertical layout (mobile) -->
    <div class="block lg:hidden absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <!-- Line for horizontal layout (desktop) -->
    <div class="hidden lg:block w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="ml-4 lg:ml-0 lg:mt-2 flex flex-col lg:items-center">
      <span class="font-medium">Register</span>
      <span class="text-sm text-gray-500 lg:text-center">Create account</span>
    </div>
  </li>
  
  <li class="relative flex lg:flex-col items-start lg:items-center mb-6 lg:mb-0 lg:flex-1">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-blue-600 text-white font-semibold">2</div>
    <!-- Line for vertical layout (mobile) -->
    <div class="block lg:hidden absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <!-- Line for horizontal layout (desktop) -->
    <div class="hidden lg:block w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="ml-4 lg:ml-0 lg:mt-2 flex flex-col lg:items-center">
      <span class="font-medium">Choose plan</span>
      <span class="text-sm text-gray-500 lg:text-center">Select plan</span>
    </div>
  </li>
  
  <li class="relative flex lg:flex-col items-start lg:items-center mb-6 lg:mb-0 lg:flex-1">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold">3</div>
    <!-- Line for vertical layout (mobile) -->
    <div class="block lg:hidden absolute h-full w-1 bg-gray-200 left-4 top-8"></div>
    <!-- Line for horizontal layout (desktop) -->
    <div class="hidden lg:block w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="ml-4 lg:ml-0 lg:mt-2 flex flex-col lg:items-center">
      <span class="font-medium">Purchase</span>
      <span class="text-sm text-gray-500 lg:text-center">Payment</span>
    </div>
  </li>
  
  <li class="relative flex lg:flex-col items-start lg:items-center lg:flex-1">
    <div class="z-10 flex-shrink-0 flex items-center justify-center w-8 h-8 lg:w-10 lg:h-10 rounded-full bg-white border-2 border-gray-300 text-gray-600 font-semibold">4</div>
    <div class="ml-4 lg:ml-0 lg:mt-2 flex flex-col lg:items-center">
      <span class="font-medium">Receive</span>
      <span class="text-sm text-gray-500 lg:text-center">Get product</span>
    </div>
  </li>
</ul>