Tailwind CSS Progressbars - Simple 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 - Simple</h1>
  <!-- start snippet  -->
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200"></div>
  </div>
  <div class="relative pt-1">
    <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200"></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...