JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="features-list">
  <li class="features-list__item is-active">
    Simple
  </li>
  <li class="features-list__item">
    Transparent
  </li>
  <li class="features-list__item">
    Collaborative
  </li>
</ul>

SCSS

.features-list {
  align-items: center;
  border-bottom: 1px solid #ccc;
  counter-reset: feature;
  list-style: none;
  display: flex;
  margin-left: -20px;
  padding: 0;
  
  &__item {
    counter-increment: feature;
    margin-left: 20px;
    padding: 10px 0 10px 25px;
    position: relative;
    
    &.is-active {
      &::before {
        background-color: #0f0;
      }
      
      &::after {
        background: #0f0;
        content: '';
        height: 1px;
        left: 0;
        top: 100%;
        position: absolute;
        width: 100%;
      }
    }
    
    &::before {
      background: #000;
      border-radius: 100%;
      color: #fff;
      content: counter(feature);
      height: 20px;
      left: 0;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
    }
  }
}