JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div  style="background-color:yellow;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="MenuList">
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

SCSS

ul{
  list-style:none;
}
.MenuList{
  display: flex;
  align-content: center;
  justify-content: space-around;
  li{
    border-left: 1px solid gray;
    padding: 20px 15px 20px 15px;
 
    a{
      color:#fff;
    }
    &:first-child{
      border-left: 0;
      border-bottom: 5px solid red;
    }
    &:hover{
      border-bottom: 5px solid red;
      cursor: pointer;
    }
  }
}