<div class="p-4">
<h1 class="font-semibold mt-8 mb-8 text-3xl" id="title">Progressbars - Badge and completion</h1>
<!-- start snippet -->
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-pink-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-purple-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-indigo-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-lightBlue-600 bg-lightBlue-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-lightBlue-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-teal-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-emerald-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-amber-600 bg-amber-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-amber-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-orange-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-red-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" style="width:30%"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div><span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-600 bg-blueGray-200">Task in progress</span></div>
<div class="text-right"><span class="text-xs font-semibold inline-block text-blueGray-600">30%</span></div>
</div>
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200">
<div class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" style="width:30%"></div>
</div>
</div>
<!-- end snippet -->
<footer class="relative bg-gray-200 pt-8 pb-6 mt-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap items-center md:justify-between justify-center">
<div class="w-full md:w-6/12 px-4 mx-auto text-center">
<div class="text-sm text-blueGray-500 font-semibold py-1">
Made with <a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=ct-tsk-jsfiddle" class="text-blueGray-500 hover:text-gray-800" target="_blank">Tailwind Starter Kit</a> by <a href="https://www.creative-tim.com" class="text-blueGray-500 hover:text-blueGray-800" target="_blank"> Creative Tim</a>.
</div>
</div>
</div>
</div>
</footer>
</div>