JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="mainprogress">
        <div class="detailprogress" style="height:100%;width:18%"><div class="done" style="width:58%"></div><div class="late" style="width:41%"></div></div>
        <div class="detailprogress" style="height:35%;width:81%"><div class="done" style="width:73%"></div><div class="todo" style="width:26%"></div></div>
    </div>
</body>

CSS

.mainprogress {
    height:60px;
    border:2px solid black;
}
.mainprogress div{
    padding:0;
    margin:0;
    display:inline-block;
}
.detailprogress div {
    height:100%;
}
.detailprogress .done {
    background-color:lightgreen;
}
.detailprogress .donelate {
    background-color:lightpink;
}
.detailprogress .late {
    background-color:red;
}
.detailprogress .todo {
    background-color:green
}