JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 50%">
  <div class="guide-bar" style="top: -5px;">
    <ul>
      <li id="intro" data-step="" class="active"></li>
      <li id="howTo"></li>
      <li id="conclusion"></li>
    </ul>
  </div>
</div>

CSS

ul {
    margin: 0;
    padding: 0
}
.guide-bar {
    position: relative;
}
.guide-bar:before {
    content: "";
    position: absolute;
    height: 1px;
    top: 7px;
    width: 100%;
    background-color: #303B44;
    color: #303B44;
    z-index: -1;
}
.guide-bar ul li {
    background-color: #fff;
    cursor: pointer;
    position: relative;
    list-style: none;
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid;
    border-radius: 50%;
}

.guide-bar ul {
    text-align: justify;
}

.guide-bar ul:before {
    content: '';
    display: block;
    width: 100%;
}
.guide-bar ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.guide-bar ul li.active:before {
    content: "";
    position: absolute;
    height: 5px;
    width: 5px;
    background-color: #2AA1FA;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-top: -2.5px; /* half the size of the circle, including the border */
    margin-left: -2.5px;
}
.guide-bar ul li.active:after {
    content: "";
    position: absolute;
    height: 25px;
    width: 25px;
    border: 1px solid #2AA1FA;
    border-radius: 50%;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin-top: -13.5px; /* half the size of the circle, including the border */
    margin-left: -13.5px;
}
.guide-bar ul li.watched {
    color: #4bd495;
    background: #4bd495;
}