Progress Colors

                    <div class="space-y-6 p-4 max-w-md mx-auto">
  <!-- Blue Progress Bar (Primary) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Primary</span>
      <span class="text-sm font-medium text-gray-500">40%</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: 40%"></div>
    </div>
  </div>
  
  <!-- Red Progress Bar (Danger) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Danger</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-red-600 h-2.5 rounded-full" style="width: 60%"></div>
    </div>
  </div>
  
  <!-- Green Progress Bar (Success) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Success</span>
      <span class="text-sm font-medium text-gray-500">80%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-green-600 h-2.5 rounded-full" style="width: 80%"></div>
    </div>
  </div>
  
  <!-- Yellow Progress Bar (Warning) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Warning</span>
      <span class="text-sm font-medium text-gray-500">30%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 30%"></div>
    </div>
  </div>
  
  <!-- Purple Progress Bar (Info) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Info</span>
      <span class="text-sm font-medium text-gray-500">50%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-purple-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
  </div>
  
  <!-- Gray Progress Bar (Secondary) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Secondary</span>
      <span class="text-sm font-medium text-gray-500">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-gray-600 h-2.5 rounded-full" style="width: 45%"></div>
    </div>
  </div>
  
  <!-- Pink Progress Bar (Accent) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Accent</span>
      <span class="text-sm font-medium text-gray-500">65%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2.5">
      <div class="bg-pink-500 h-2.5 rounded-full" style="width: 65%"></div>
    </div>
  </div>
</div>