<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-primary-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-primary-500 rounded-md" style="width: 90%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-secondary-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-secondary-500 rounded-md" style="width: 85%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-success-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-success-500 rounded-md" style="width: 80%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-info-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-info-500 rounded-md" style="width: 70%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-warning-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-warning-500 rounded-md" style="width: 60%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-danger-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-danger-500 rounded-md" style="width: 40%;"></div>
</div>
<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-gray-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-dark rounded-md" style="width: 20%;"></div>
</div>

<div class="flex w-full h-[13px] overflow-hidden rounded-md bg-primary-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="text-center flex flex-col justify-center overflow-hidden bg-primary-500 rounded-md text-white text-[10px] font-medium" style="width: 90%;">
        90%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-secondary-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-secondary-500 rounded-md text-white text-[10px] font-medium" style="width: 85%;">
        85%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-success-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-success-500 rounded-md text-white text-[10px] font-medium" style="width: 80%;">
        80%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-info-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-info-500 rounded-md text-white text-[10px] font-medium" style="width: 70%;">
        70%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-warning-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-warning-500 rounded-md text-white text-[10px] font-medium" style="width: 60%;">
        60%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-danger-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-danger-500 rounded-md text-white text-[10px] font-medium" style="width: 40%;">
        40%
    </div>
</div>
<div class="text-center flex w-full h-[13px] overflow-hidden rounded-md bg-gray-50 dark:bg-[#172036] mb-[15px] last:mb-0">
    <div class="flex flex-col justify-center overflow-hidden bg-dark rounded-md text-white text-[10px] font-medium" style="width: 20%;">
        20%
    </div>
</div>