JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="progress">


  <li class="done">
    <a href="#" title="More about the First Step">
      <span class="circle"></span>
    Step1</a>
  </li>


  <li class="done">
    <a href="#" title="Afterwards the Second Step">
      <span class="circle"></span>
    Step2</a>
  </li>


  <li class="busy">
    <a href="#" title="This about the current active Step">
      <span class="circle"></span>
    Step3</a>
  </li>


  <li>
    <a href="#" title="Future Next Step">
      <span class="circle"></span>
    Step4</a>
  </li>


  <li>
    <a href="#" title="And the Final Step">
      <span class="circle"></span>
    Step5</a>
  </li>


</ul>

CSS

body{
  background: lightblue;
  width: auto;
  padding: 50px;
}
a{text-decoration: none}

.progress {
    display: flex;
    background: yellow;
    width: auto;
}

.progress>li {
    flex: 1;
}

.progress>li, .progress>li a{
    list-style: none;
    text-align: center;
    width: auto;
    padding: 0;
    margin: 0;
    position: relative;
    text-overflow: ellipsis;
    color: lightgrey;
    display: block;
}

.progress>li .circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: lightgrey;
    display: block;
    margin: 0 auto .5em;
}

.progress>li .circle:after,
.progress>li .circle:before {
    display: block;
    position: absolute;
    top: 10px;
    width: 100%;
    height: 4px;
    content: '';
    background: lightgrey;
}


.progress>li :before {left: 0}
.progress>li :after {right: 0}

.progress>li:first-child .circle:after,
.progress>li:first-child .circle:before {
    width: 50%;
    margin-left: 50%
}

.progress>li:last-child .circle:after,
.progress>li:last-child .circle:before {
    width: 50%;
    margin-right: 50%
}

.progress>li.done .circle,
.progress>li.done .circle:after,
.progress>li.done .circle:before {background: green}
.progress>li.done,
.progress>li.done a{color: green}

.progress>li.busy .circle,
.progress>li.busy .circle:after,
.progress>li.busy .circle:before {background: violet}
.progress>li.busy,
.progress>li.busy a{color: violet}