JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="line"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col active"></div>
</div>

SCSS

.row {
  position: relative;
  width: 300px;
  height: 100px;
  margin: 50px;
  
  .line {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
      height: 15px;
      background-color: #ddd;
      box-shadow: 0px 5px 7px 1px #ccc inset;
  }
  
  .col {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd;
    position: absolute;
    top: 50%;
    box-shadow: 0px 5px 7px 1px #ccc inset;
    transform: translateY(-50%);
    
    &.active {
      background-color: green;
      box-shadow: none;
    }
    
    &:nth-child(1) {
      left: 0;
    }
    
    &:nth-child(2) {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    &:nth-child(3) {
      right: 0;
    }
  }
}