Progress Basic

                    <div class="space-y-6 p-4 max-w-md mx-auto">
  <!-- Basic Progress Bar (0%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">0%</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: 0%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (25%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">25%</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: 25%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (50%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</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-blue-600 h-2.5 rounded-full" style="width: 50%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (75%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">75%</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: 75%"></div>
    </div>
  </div>
  
  <!-- Progress Bar (100%) -->
  <div>
    <div class="flex justify-between mb-1">
      <span class="text-sm font-medium text-gray-700">Basic Progress</span>
      <span class="text-sm font-medium text-gray-500">100%</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: 100%"></div>
    </div>
  </div>
</div>