<div class="flex justify-center p-6">
<div class="w-full max-w-80">
<div class="flex h-2 w-full overflow-hidden rounded-full bg-gray-200">
<span class="rounded-full bg-indigo-500" style="width: 36%"></span>
</div>
</div>
</div>
<div class="flex justify-center p-6">
<div class="inline-flex max-w-full items-center">
<span class="mr-4 whitespace-nowrap text-sm font-medium text-gray-600">75%</span>
<div class="inline-flex h-2 w-80 max-w-full overflow-hidden rounded-full bg-gray-200">
<span class="rounded-full bg-indigo-500" style="width: 75%"></span>
</div>
</div>
</div>
<div class="flex justify-center p-6">
<div class="inline-block max-w-full">
<div class="mb-1 flex items-baseline justify-between">
<span class="mr-4 whitespace-nowrap text-sm font-medium text-gray-900">Active Workflows</span>
<span class="whitespace-nowrap text-sm text-gray-600">3/20</span>
</div>
<div class="flex h-2 w-80 max-w-full overflow-hidden rounded-full bg-gray-200">
<span class="rounded-full bg-indigo-500" style="width: 15%"></span>
</div>
</div>
</div>
<div class="flex flex-col items-center space-y-6 p-6">
<div class="relative flex h-2 w-full max-w-xl space-x-2">
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
</div>
<div class="relative flex h-2 w-full max-w-xl space-x-2">
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
<div class="flex-1 rounded-full bg-gray-100"></div>
</div>
<div class="relative flex h-2 w-full max-w-xl space-x-2">
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
<div class="flex-1 rounded-full bg-gray-100" style="clip-path: inset(0px round 99px)">
<div class="absolute left-0 top-0 size-full bg-gradient-to-r from-green-200 to-green-600"></div>
</div>
</div>
</div>
<div class="flex justify-center p-6">
<div class="w-full max-w-80">
<div class="flex h-2 w-full divide-x-2 divide-white overflow-hidden rounded-full bg-gray-200">
<span class="rounded-l-full" style="width: 50%; background-color: #3178c6" aria-label="Typescript 50"></span>
<span style="width: 30%; background-color: #563d7c" aria-label="CSS 30"></span>
<span style="width: 15%; background-color: #f1e05a" aria-label="Javascript 15"></span>
<span class="rounded-r-full" style="width: 5%; background-color: #fcb32c" aria-label="MDX 5"></span>
</div>
</div>
</div>