<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="w-full bg-gray-200 rounded-full dark:bg-gray-700">
<div class="bg-primary-500 text-xs font-medium text-primary-100 text-center p-0.5 leading-none rounded-full" style="width: 45%"> 45%</div>
</div>
</div>
<div class="mb-3">
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
<div class="bg-primary-500 text-xs font-medium text-primary-100 text-center p-0.5 leading-none rounded-full" style="width: 55%"> 55%</div>
</div>
</div>
<div class="mb-3">
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
<div class="bg-primary-500 text-xs font-medium text-primary-100 text-center p-0.5 leading-none rounded-full" style="width: 65%"> 65%</div>
</div>
</div>
<div class="mb-3">
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
<div class="bg-primary-500 text-xs font-medium text-primary-100 text-center p-0.5 leading-none rounded-full" style="width: 75%"> 75%</div>
</div>
</div>
Rounded soft color badge
<div class="mb-3">
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-slate-700 dark:text-white">Robotech</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">Robotech</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">Robotech</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">Robotech</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>
@@include("partials/footer/footer.html")