Tailwind CSS Steps Components

                            <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> 
                        

                            <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> 
                        

                            <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> 
                        

                            <div class="overflow-x-auto p-4">
  <ul class="flex w-max space-x-2">
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white text-xs font-semibold">1</div>
      <div class="text-xs mt-1 font-medium">Start</div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white text-xs font-semibold">2</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white text-xs font-semibold">3</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-600 text-white text-xs font-semibold">4</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 text-xs font-semibold">5</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 text-white text-xs font-semibold">6</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-purple-600 text-white text-xs font-semibold">7</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 text-xs font-semibold">8</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-red-600 text-white text-xs font-semibold">9</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-red-600 text-white text-xs font-semibold">10</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 text-xs font-semibold">11</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 text-xs font-semibold">12</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-yellow-500 text-white text-xs font-semibold">13</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-yellow-500 text-white text-xs font-semibold">14</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-white border-2 border-gray-300 text-gray-600 text-xs font-semibold">15</div>
      <div class="text-xs mt-1 font-medium"></div>
    </li>
    <li class="flex flex-col items-center">
      <div class="z-10 flex items-center justify-center w-8 h-8 rounded-full bg-gray-600 text-white text-xs font-semibold">16</div>
      <div class="text-xs mt-1 font-medium">End</div>
    </li>
  </ul>
</div> 
                        

                            <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> 
                        

                            <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> 
                        

                            <div class="flex flex-col space-y-12 w-full max-w-4xl mx-auto p-4">
  <!-- Primary (Blue) Steps -->
  <div>
    <h3 class="text-sm font-medium mb-4 text-center">Primary Theme</h3>
    <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-blue-200"></div>
        <div class="text-sm mt-2 font-medium">Step 1</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-blue-200"></div>
        <div class="text-sm mt-2 font-medium">Step 2</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-blue-300 text-blue-600 font-semibold">3</div>
        <div class="w-full h-1 absolute top-5 bg-blue-200"></div>
        <div class="text-sm mt-2 font-medium">Step 3</div>
      </li>
    </ul>
  </div>

  <!-- Green Steps -->
  <div>
    <h3 class="text-sm font-medium mb-4 text-center">Success Theme</h3>
    <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-green-600 text-white font-semibold">1</div>
        <div class="w-full h-1 absolute top-5 bg-green-200"></div>
        <div class="text-sm mt-2 font-medium">Step 1</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-green-600 text-white font-semibold">2</div>
        <div class="w-full h-1 absolute top-5 bg-green-200"></div>
        <div class="text-sm mt-2 font-medium">Step 2</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-green-300 text-green-600 font-semibold">3</div>
        <div class="w-full h-1 absolute top-5 bg-green-200"></div>
        <div class="text-sm mt-2 font-medium">Step 3</div>
      </li>
    </ul>
  </div>

  <!-- Red Steps -->
  <div>
    <h3 class="text-sm font-medium mb-4 text-center">Error Theme</h3>
    <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-red-600 text-white font-semibold">1</div>
        <div class="w-full h-1 absolute top-5 bg-red-200"></div>
        <div class="text-sm mt-2 font-medium">Step 1</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-red-600 text-white font-semibold">2</div>
        <div class="w-full h-1 absolute top-5 bg-red-200"></div>
        <div class="text-sm mt-2 font-medium">Step 2</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-red-300 text-red-600 font-semibold">3</div>
        <div class="w-full h-1 absolute top-5 bg-red-200"></div>
        <div class="text-sm mt-2 font-medium">Step 3</div>
      </li>
    </ul>
  </div>

  <!-- Purple Steps -->
  <div>
    <h3 class="text-sm font-medium mb-4 text-center">Purple Theme</h3>
    <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-purple-600 text-white font-semibold">1</div>
        <div class="w-full h-1 absolute top-5 bg-purple-200"></div>
        <div class="text-sm mt-2 font-medium">Step 1</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-purple-600 text-white font-semibold">2</div>
        <div class="w-full h-1 absolute top-5 bg-purple-200"></div>
        <div class="text-sm mt-2 font-medium">Step 2</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-purple-300 text-purple-600 font-semibold">3</div>
        <div class="w-full h-1 absolute top-5 bg-purple-200"></div>
        <div class="text-sm mt-2 font-medium">Step 3</div>
      </li>
    </ul>
  </div>
</div>