JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="title">
    1/5
  </div>
  <div class="progress">
    <span class="active"></span><span class="active"></span><span></span><span></span><span></span>
  </div>
</div>

CSS

.container {
  display: flex;
}

.container .title {
  padding-right: 20px;
}

.container .progress {
  display: flex;
  width: 250px;
}

.container .progress span {
  display: block;
  height: 15px;
  width: 20%;
  background: gray;
  border: solid 1px #fff;
  border-radius: 7px;
  margin-right: -15px;
  position: relative;
}

.container .progress span.active {
  background: blue;
}

.container .progress span:nth-child(1) {
  z-index: 40;
}

.container .progress span:nth-child(2) {
  z-index: 35;
}

.container .progress span:nth-child(3) {
  z-index: 25;
}

.container .progress span:nth-child(4) {
  z-index: 10;
}