Progress Sizes

                    <div class="space-y-8 p-4 max-w-md mx-auto">
  <!-- Extra Small Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Extra Small</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-1">
      <div class="bg-blue-600 h-1 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Small Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Small</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-1.5">
      <div class="bg-blue-600 h-1.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Default Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Default</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Large Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Large</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-4">
      <div class="bg-blue-600 h-4 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Extra Large Progress Bar -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Extra Large</span>
      <span class="text-sm font-medium text-gray-500">60%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-6">
      <div class="bg-blue-600 h-6 rounded-full" style="width: 60%"></div>
    </div>
  </div>
</div>