Basic Progressbar
45%
75%
95%
35%
<div class="shadow w-full bg-gray-200 mb-2">
<div class="bg-primary-500 text-xs py-1 text-center text-white" style="width: 45%">45%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2">
<div class="bg-info-500 text-xs py-1 text-center text-white" style="width: 75%">75%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2">
<div class="bg-danger-500 text-xs py-1 text-center text-white" style="width: 95%">95%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2">
<div class="bg-warning-500 text-xs py-1 text-center text-white" style="width: 35%">35%</div>
</div>Progressbar Pill
45%
75%
95%
35%
<div class="shadow w-full bg-gray-200 mb-2 rounded-full">
<div class="bg-primary-500 text-xs py-1 text-center text-white rounded-full" style="width: 45%">45%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2 rounded-full">
<div class="bg-info-500 text-xs py-1 text-center text-white rounded-full" style="width: 75%">75%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2 rounded-full">
<div class="bg-danger-500 text-xs py-1 text-center text-white rounded-full" style="width: 95%">95%</div>
</div>
<div class="shadow w-full bg-gray-200 mb-2 rounded-full">
<div class="bg-warning-500 text-xs py-1 text-center text-white rounded-full" style="width: 35%">35%</div>
</div>Progressbar Multiple Color
<div class="relative pt-1 mb-3">
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-warning-200">
<div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-primary-500"></div>
<div style="width: 15%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-warning-500"></div>
<div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-danger-500"></div>
</div>
</div>