Steps Interactive

                    <ul class="flex w-full">
  <!-- Completed step -->
  <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-green-500 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="M5 13l4 4L19 7" />
      </svg>
    </div>
    <div class="w-full h-1 absolute top-5 bg-green-500"></div>
    <div class="text-sm mt-2 font-medium text-green-600">Completed</div>
  </li>
  
  <!-- Current step -->
  <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 ring-4 ring-blue-100 font-semibold">2</div>
    <div class="w-full h-1 absolute top-5 bg-blue-200"></div>
    <div class="text-sm mt-2 font-medium text-blue-600">Current</div>
  </li>
  
  <!-- Upcoming step -->
  <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">Upcoming</div>
  </li>
  
  <!-- Disabled step -->
  <li class="relative flex-1 flex flex-col items-center opacity-50 cursor-not-allowed">
    <div class="z-10 flex items-center justify-center w-10 h-10 rounded-full bg-white border-2 border-gray-300 text-gray-400 font-semibold">4</div>
    <div class="w-full h-1 absolute top-5 bg-gray-200"></div>
    <div class="text-sm mt-2 font-medium text-gray-400">Disabled</div>
  </li>
  
  <!-- Error step -->
  <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-red-500 text-white ring-4 ring-red-100 font-semibold">!</div>
    <div class="w-full h-1 absolute top-5 bg-red-200"></div>
    <div class="text-sm mt-2 font-medium text-red-500">Error</div>
  </li>
</ul>