JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="progress">
    <li class="done"><span>1</span></li>
    <li class="done"><span>2</span></li>
    <li class="half done"><span>3</span></li>
    <li class=""><span>4</span></li>
    <li class=""><span>5</span></li>
</ul>

CSS

.progress
{
    margin:0;
    padding:0;
    list-style: none;
}

.progress > li
{
    margin: 0 10px 0px 0px;
    padding: 0;
    padding: 5px 10px;
    line-height:1em;
    background-color: gray;
    color: #FFF;
    float: left;
    position: relative;
    overflow: hidden;
}

.progress > li:not(.half).done,
.progress > li.done:before
{
    background-color: green;
}

.progress > li:before
{
   bottom:0;
   top: 50%;
   left:0;
   right:0;
   content:"";
   position: absolute;   
}

.progress > li:last-of-type
{
    margin-right: 0
}

.progress > li > span
{
    position: relative;
}