Progress With float label

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