Progress

            
<div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
  <div role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%" class="flex h-full bg-primary-500"></div>
</div>
            
          

            
<div class="space-y-5">
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%" class="flex h-full bg-primary-500"></div>
  </div>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%" class="flex h-full bg-green-500"></div>
  </div>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" class="flex h-full bg-yellow-500"></div>
  </div>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%" class="flex h-full bg-red-500"></div>
  </div>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%" class="flex h-full bg-gray-500"></div>
  </div>
</div>
            
          

            
<div class="space-y-5">
  <div class="relative flex h-px w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%" class="flex h-full bg-primary-500"></div>
  </div>
  <div class="relative flex h-1 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%" class="flex h-full bg-primary-500"></div>
  </div>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" class="flex h-full bg-primary-500"></div>
  </div>
  <div class="relative flex h-4 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%" class="flex h-full bg-primary-500"></div>
  </div>
</div>
            
          

            
<div class="space-y-1">
  <dl class="flex items-center justify-between">
    <dt class="font-medium text-secondary-700">Progress</dt>
    <dd class="text-sm text-secondary-500">35%</dd>
  </dl>
  <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
    <div role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width: 35%" class="flex h-full items-center justify-center bg-primary-500 text-xs text-white"></div>
  </div>
</div>
            
          

            
<div class="mt-5">
  <div class="relative">
    <span class="text-secondary-6 00 absolute bottom-full mb-2 -translate-x-1/2 rounded-md border border-secondary-50 bg-white py-1 px-2 text-sm text-secondary-500 shadow" style="left: 45%">45%</span>
    <div class="relative flex h-2 w-full overflow-hidden rounded-full bg-secondary-200">
      <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" class="flex h-full items-center justify-center bg-primary-500 text-xs text-white"></div>
    </div>
  </div>
</div>