Tailwind CSS Progress style example


Here is an example of how you might create a progress bar using Tailwind CSS:

<div class="relative h-6 mt-2 bg-gray-300">
    <div class="bg-indigo-600 h-full absolute left-0 top-0" style="width: 50%;"></div>

This will create a progress bar with a height of 6 pixels and a width of 50%. The bg-gray-300 class sets the background color of the progress bar, and the bg-indigo-600 class sets the color of the progress bar’s fill. The h-full class stretches the fill to fill the entire height of the progress bar.

You can customize the appearance of the progress bar further by using additional Tailwind CSS classes. For example, you can use the rounded-full class to round the corners of the progress bar, or the opacity-75 class to make the fill semi-transparent. You can also use JavaScript to dynamically update the width of the fill to reflect the progress of a task.