Steps Numbered

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