JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="greyParent">
   <div class="activeSlide"></div>
   <div class="activeSlide"></div>
   <div class="activeSlide"></div>
   <div></div>
   <div></div>
  </div>
</div>

CSS

.greyParent{
  height: 19px;
  border-radius: 7px;
  background: rgb(196, 196, 196);
}
.greyParent > div{
  background: rgb(196, 196, 196);
  border-radius: 0px 7px 7px 0px;
  border-right: 1px solid #fff;
  float: left;
  width: 25%;
  height:19px;
  position: absolute;
}
.greyParent > .activeSlide{
  background: rgb(0, 97, 188);
}
.greyParent > div:nth-child(1){
  left:0%;
  z-index:5;
  width: 20%;
}
.greyParent > div:nth-child(2){
  left:15%;
  z-index:4;
}
.greyParent > div:nth-child(3){
  left:35%;
  z-index:3;
}
.greyParent > div:nth-child(4){
  left:55%;
  z-index:2;
}
.greyParent > div:nth-child(5){
  left:75%;
  z-index:1;
}