JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="passed">Step #1</li>
  <li class="passed">Step #2</li>
  <li class="passed">Step #3</li>
  <li class="current">Step #4<br><small><i>Description of the step</i></small></li>
  <li>Step #5</li>
  <li>Step #6</li>
  <li>Step #7</li>
</ul>

CSS

ul {
  list-style: none;
  margin: 50px;
  padding: 0;
  font: normal 16px/22px Arial;
  color: #999;
}
li {
  overflow: hidden;
  position: relative;
  padding: 0 0 10px 35px;
  }
  li::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 9px;
    width: 20px;
    height: 999px;
    border: 2px solid lightblue;
    border-width: 2px 0 0 2px;
    }
    li:last-child::before {
      border-width: 2px 0 0;
      }
  li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid lightblue;
    border-radius: 50%;
    }
  li.current,
  li.passed {
    color: #000;
    }
    li.current::before {
      border-top-color: dodgerblue;
      }
    li.current::after {
      border-color: dodgerblue;
      background: dodgerblue;
      }
    li.passed::before,
    li.passed::after {
      border-color: dodgerblue;
      }