JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <ul>
    <li class="active"><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li class="active"><a href="#">products & services</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</section>

CSS

body {
  background: #f2f2f2;
}

li {
  display: inline;
  list-style: none;
  height: 7em;
  text-align: center;
  float: left;
  padding-top: 1em;
  margin: 0 3px;
}

li a {
  padding: 1.25em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
li a:hover {
  border-bottom: 2px solid orange;
}

li.active {
  background: #1ea8a0;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
}
li.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color:transparent;
  background-image:linear-gradient(194deg, #1ea8a0 50%, transparent 50%);
  bottom:-67%;
  left:0;
  -webkit-backface-visibility: hidden;  
}

li.active:hover {
  background: #2ec0b8;
}

li.active a {
  color: #fff;
}
li.active a:hover {
  border-bottom: 2px solid transparent;
}