<!-- primary progress -->
<div class="flex h-2 mklausjenrhtm bg-purple-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-purple-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:87%">
<span class="sr-only">87%</span>
</div>
</div>
<!-- danger progress -->
<div class="flex h-2 mklausjenrhtm bg-red-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-red-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:67%">
<span class="sr-only">67%</span>
</div>
</div>
<!-- warning progress -->
<div class="flex h-2 mklausjenrhtm bg-yellow-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-yellow-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:57%">
<span class="sr-only">57%</span>
</div>
</div>
<!-- success progress -->
<div class="flex h-2 mklausjenrhtm bg-green-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:77%">
<span class="sr-only">77%</span>
</div>
</div>
<!-- info progress -->
<div class="flex h-2 mklausjenrhtm bg-sky-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-sky-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:87%">
<span class="sr-only">87%</span>
</div>
</div>
<!-- small -->
<div class="flex h-2 mklausjenrhtm bg-green-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:77%">
<span class="sr-only">77%</span>
</div>
</div>
<!-- medium -->
<div class="flex h-4 mklausjenrhtm bg-green-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:77%">
<span class="sr-only">77%</span>
</div>
</div>
<!-- large -->
<div class="flex h-6 mklausjenrhtm bg-green-200/50 rounded">
<div class="flex ioajsklehsnm yhansklopals mklausjenrhtm text-white text-center whitespace-nowrap bg-green-500" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:77%">
<span class="sr-only">77%</span>
</div>
</div>
