Notus NextJS Progressbars
These are used to show your users the progression of an action. Choose from down bellow the type and color of your progressbar. Everything here is styled using Tailwind CSS.
Simple
Progressbar with 0% completed. You can use this at the start of your progression.
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
</div>
</div>
Filled
Progressbar with 30% completed. Just change the width style property from 30% to your level of progress completion.
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" ></div>
</div>
</div>
Multiple colors
You can have multiple colors, for your multiple stages of progression completion. The bellow example shows the first 10% as teal, the next 15% as indigo, and the last 25% as gray. You could add the next 50% as green, to show that the progression is almost done.
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" ></div>
</div>
</div>
Badge
Alongside your progress you can also add a Badge and a Percentage so that your users can easily understand the progression completion.
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-blueGray-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-red-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-orange-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-amber-600 bg-amber-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-amber-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-emerald-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-teal-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-lightBlue-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-indigo-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-purple-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-pink-600" >
0%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
</div>
</div>
Badge and completion
The following example is a progress bar with badge and 30% completions.
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-blueGray-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-red-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-orange-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-amber-600 bg-amber-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-amber-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-emerald-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-teal-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-lightBlue-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-indigo-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-purple-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-pink-600" >
30%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width:30%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" ></div>
</div>
</div>
Badge and multiple completion
You can also add a Badge to a multiple states progressbar.
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blueGray-600 bg-blueGray-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-blueGray-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blueGray-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blueGray-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-red-600 bg-red-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-red-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-red-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-red-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-orange-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-amber-600 bg-amber-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-amber-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-amber-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-amber-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-emerald-600 bg-emerald-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-emerald-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-teal-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-lightBlue-600 bg-lightBlue-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-lightBlue-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-lightBlue-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-lightBlue-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-indigo-600 bg-indigo-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-indigo-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-indigo-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-purple-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-purple-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-purple-500" ></div>
</div>
</div>
<div className= "relative pt-1" >
<div className= "flex mb-2 items-center justify-between" >
<div>
<span className= "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-pink-600 bg-pink-200" >
Task in progress
</span>
</div>
<div className= "text-right" >
<span className= "text-xs font-semibold inline-block text-pink-600" >
50%
</span>
</div>
</div>
<div className= "overflow-hidden h-2 mb-4 text-xs flex rounded bg-pink-200" >
<div style= "width: 10%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500" ></div>
<div style= "width: 15%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-indigo-500" ></div>
<div style= "width: 25%" className= "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-pink-500" ></div>
</div>
</div>