Steps With Icons

                    <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-12 h-12 rounded-full bg-blue-600 text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
      </svg>
    </div>
    <div class="w-full h-1 absolute top-6 bg-gray-200"></div>
    <div class="text-sm mt-3 font-medium">Account</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
      </svg>
    </div>
    <div class="w-full h-1 absolute top-6 bg-gray-200"></div>
    <div class="text-sm mt-3 font-medium">Details</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-12 h-12 rounded-full bg-white border-2 border-gray-300 text-gray-600">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
      </svg>
    </div>
    <div class="w-full h-1 absolute top-6 bg-gray-200"></div>
    <div class="text-sm mt-3 font-medium">Payment</div>
  </li>
  <li class="relative flex-1 flex flex-col items-center">
    <div class="z-10 flex items-center justify-center w-12 h-12 rounded-full bg-white border-2 border-gray-300 text-gray-600">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
    </div>
    <div class="w-full h-1 absolute top-6 bg-gray-200 -right-1/2"></div>
    <div class="text-sm mt-3 font-medium">Confirm</div>
  </li>
</ul>