JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Home</li>
  <li class="active">Services</li>
  <li>Products</li>
  <li>Contact</li>
</ul>

SCSS

ul{
  list-style:none;
  margin: 30px 0;
  padding: 0;
  text-align: center;
  li{
    display: inline-block;
    font:14px/33px arial,verdana,tahoma;
    padding: 0 8px;
    &:before{
      display:block;
      content:'';
      width: 20px;
      height: 20px;
      background:#fa0;
      border-radius:100%;
      margin: 0 auto 5px;
    }
    &.active{
      &:before{
        background: #f03;
      }
    }
  }
}