Tailwind CSS Progressbars - Badge by Creative Tim

by CreativeTim

HTML

<link rel="stylesheet" href="https://gitcdn.link/cdn/creativetimofficial/public-assets/master/tailwind-starter-kit/jsfiddle-style.css">
<div class="p-4">
  <h1 class="font-semibold mt-8 mb-8 text-3xl" id="title">Progressbars - Badge</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">0%</span></div>
    </div>
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200"></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">0%</span></div>
    </div>
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200"></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">0%</span></div>
    </div>
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200"></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">0%</span></div>
    </div>
   ...