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