Tailwind CSS Progress - Versoly UI

<div class="col">
  <p>Default</p>
  <div class="progress">
    <div class="progress-bar bg-gray-600 w-[10%]"></div>
  </div>
</div>
<div class="col">
  <p>primary</p>
  <div class="progress">
    <div class="progress-bar bg-primary w-[20%]"></div>
  </div>
</div>
<div class="col">
  <p>secondary</p>
  <div class="progress">
    <div class="progress-bar bg-secondary w-[30%]"></div>
  </div>
</div>
<div class="col">
  <p>tertiary</p>
  <div class="progress">
    <div class="progress-bar bg-tertiary w-[40%]"></div>
  </div>
</div>
<div class="col">
  <p>neutral</p>
  <div class="progress">
    <div class="progress-bar bg-neutral w-[50%]"></div>
  </div>
</div>
<div class="col">
  <p>success</p>
  <div class="progress">
    <div class="progress-bar bg-success w-[60%]"></div>
  </div>
</div>
<div class="col">
  <p>info</p>
  <div class="progress">
    <div class="progress-bar bg-info w-[70%]"></div>
  </div>
</div>
<div class="col">
  <p>warning</p>
  <div class="progress">
    <div class="progress-bar bg-warning w-[80%]"></div>
  </div>
</div>
<div class="col">
  <p>danger</p>
  <div class="progress">
    <div class="progress-bar bg-danger w-[90%]"></div>
  </div>
</div>

<div class="col">
  <p>sm</p>
  <div class="progress progress-sm">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>base</p>
  <div class="progress progress-base">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>lg</p>
  <div class="progress progress-lg">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>
<div class="col">
  <p>xl</p>
  <div class="progress progress-xl">
    <div class="progress-bar bg-primary w-[55%]"></div>
  </div>
</div>

<div class="progress progress-lg">
  <div class="progress-bar bg-primary w-[9%]"></div>
  <div class="progress-bar bg-secondary w-[20%]"></div>
  <div class="progress-bar bg-tertiary w-[15%]"></div>
  <div class="progress-bar bg-danger w-[55%]"></div>
</div>