DOCUMENTATION

<div>
    <div class="flex w-full h-4 align-middle bg-gray-200 rounded-full shadow-inner">
        <div
            class="w-0/3 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white bg-blue-500 rounded-l-full">
            0%
        </div>
    </div>
    <div class="flex w-full h-4 mt-4 align-middle bg-gray-200 rounded-full shadow-inner">
        <div
            class="w-1/4 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white bg-green-500 rounded-l-full">
            25%</div>
    </div>
    <div class="flex w-full h-4 mt-4 align-middle bg-gray-200 rounded-full shadow-inner">
        <div
            class="w-2/4 h-4 py-1 text-xs leading-none text-center justify-center flex items-center text-white rounded-l-full bg-cyan-500">
            50%</div>
    </div>
    <div class="flex w-full h-4 mt-4 align-middle bg-gray-200 rounded-full shadow-inner">
        <div
            class="w-3/4 h-4 py-1 text-xs leading-none text-center flex items-center justify-center text-white bg-orange-500 rounded-l-full">
            75%</div>
    </div>
    <div class="flex w-full h-4 mt-4 align-middle bg-gray-200 rounded-full shadow-inner">
        <div
            class="w-full h-4 py-1 text-xs leading-none flex items-center justify-center text-center text-white bg-red-500 rounded-full">
            100%</div>
    </div>
    <div class="block mt-4 ">
        <div class="flex justify-end">
            <div><span class="text-gray-500">40%</span></div>
        </div>
    </div>
    <div class="flex w-full align-middle bg-gray-200 rounded-full shadow-inner h-10px">
        <div class="w-2/5 py-1 text-xs leading-none text-center text-white bg-red-500 rounded-l-full h-10px">
        </div>
    </div>
    <div class="block mt-4 ">
        <div class="flex justify-end">
            <div><span class="text-gray-500">40%</span></div>
        </div>
    </div>
    <div class="flex w-full align-middle bg-gray-200 rounded-full shadow-inner h-10px">
        <div class="w-2/5 py-1 text-xs leading-none text-center text-white bg-blue-500 rounded-l-full h-10px">
        </div>
    </div>
    <div class="block mt-4 ">
        <div class="flex justify-end">
            <div><span class="text-gray-500">40%</span></div>
        </div>
    </div>
    <div class="flex w-full align-middle bg-gray-200 rounded-full shadow-inner h-10px">
        <div class="w-2/5 py-1 text-xs leading-none text-center text-white bg-green-500 rounded-l-full h-10px">
        </div>
    </div>
    <div class="mt-4">
        <div class="flex w-full h-4 align-middle bg-gray-200 rounded-full shadow-inner">
            <div class="w-1/5 h-4 py-1 text-xs leading-none text-center text-white bg-blue-500 rounded-l-full">
            </div>
            <div class="w-1/3 h-4 py-1 text-xs leading-none text-center text-white bg-green-500"></div>
        </div>
    </div>
</div>