JSFiddle - React, Tailwind, and code Playground

by Jeremy Whiteford

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;
  overflow: hidden;
}
li.active::after {
  content: '';
  position: absolute;
  background: #fff;
  width: 10em;
  height: 100%;
  height: 20em;
  top: 5%;
  left: 15%;
  transform: rotate(-75deg);
}

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

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