Steps Colors

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