Progress

<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mb-3">
    <div class="bg-primary-500 h-2 rounded-full" style="width: 45%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mb-3">
    <div class="bg-primary-500 h-2 rounded-full" style="width: 55%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mb-3">
    <div class="bg-primary-500 h-2 rounded-full" style="width: 65%"></div>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700 mb-3">
    <div class="bg-primary-500 h-2 rounded-full" style="width: 75%"></div>
</div>

<div class="mb-3">
    <div class="mb-1 text-sm font-medium dark:text-white">Small</div>
        <div class="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
        <div class="bg-gray-600 h-1 rounded-full dark:bg-gray-300" style="width: 45%"></div>
    </div>
</div>

<div class="mb-3">
    <div class="mb-1 text-sm font-medium dark:text-white">Default</div>
        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
        <div class="bg-gray-600 h-2 rounded-full dark:bg-gray-300" style="width: 45%"></div>
    </div>
</div>

<div class="mb-3">
    <div class="mb-1 text-sm font-medium dark:text-white">Large</div>
        <div class="w-full h-3 bg-gray-200 rounded-full dark:bg-gray-700">
        <div class="h-3 bg-gray-600 rounded-full dark:bg-gray-300" style="width: 45%"></div>
    </div>
</div>

<div class="">
    <div class="mb-1 text-sm font-medium dark:text-white">Extra Large</div>
        <div class="w-full h-5 bg-gray-200 rounded-full dark:bg-gray-700">
        <div class="h-5 bg-gray-600 rounded-full dark:bg-gray-300" style="width: 45%"></div>
    </div>
</div>

<div class="mb-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-slate-700 dark:text-white">Aabiz</span>
        <span class="text-sm font-medium text-slate-700 dark:text-white">45%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
        <div class="bg-primary-500 h-2 rounded-full" style="width: 45%"></div>
    </div>
</div>
<div class="mb-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-slate-700 dark:text-white">Aabiz</span>
        <span class="text-sm font-medium text-slate-700 dark:text-white">55%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
        <div class="bg-green-500 h-2 rounded-full" style="width: 55%"></div>
    </div>
</div>
<div class="mb-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-slate-700 dark:text-white">Aabiz</span>
        <span class="text-sm font-medium text-slate-700 dark:text-white">65%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
        <div class="bg-pink-500 h-2 rounded-full" style="width: 65%"></div>
    </div>
</div>
<div class="mb-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium text-slate-700 dark:text-white">Aabiz</span>
        <span class="text-sm font-medium text-slate-700 dark:text-white">75%</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
        <div class="bg-yellow-500 h-2 rounded-full" style="width: 75%"></div>
    </div>
</div>