Progress Bar Tailwind by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="w-1/2 pt-5 px-4 mb-8 mx-auto text-center"> <div class="relative pt-1"> <div class="flex mb-2 items-center justify-between"> <div> <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200"> 50% Task completed </span> </div> <div class="text-right"> <span class="text-xs font-semibold inline-block text-blue-600"> 100% </span> </div> </div> <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200"> <div style="width: 10%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-300"></div> <div style="width: 15%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div> <div style="width: 25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-700"></div> </div> </div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Tailwind CSS features rich progress bar component. Use in your various project It features a progress color with a completed indicator in percent. Catagory Tailwind Tags Animation Progress Bar Resource Add External Stylesheets and Script <link href="https://unpkg.com/tailwindcss@1.4.6/dist/tailwind.min.css" rel="stylesheet">
