JSFiddle - React, Tailwind, and code Playground

HTML

<main>

  <div class="bubbles">
    <div class="wrap">
      <div class="bubble"></div>
      <div class="bubble"></div>
      <div class="bubble active"></div>
      <div class="bubble"></div>
    </div>
  </div>

</main>

SCSS

main {
  margin-top: 2rem;
}

.bubbles {
  display: flex;
  flex-direction: column;
  align-items: center;

  &:before, &:after {
    content: '';
    height: 75px;
    width: 2px;
    background: tomato;
  }

  .wrap {
    margin: 1rem 0;
  }

  .bubble {
    width: 16px;
    height: 16px;
    border: 2px solid tomato;
    border-radius: 50px;
    margin: 1rem 0;
    background: #ffeba4;

    &.active {
      background: #a6a5ff;
      border-color: #4354d6;
    }

    &:hover {
      background: #a6a5ff;
      border-color: #4354d6;
      cursor: pointer;
    }
  }
}