JSFiddle - React, Tailwind, and code Playground

HTML

<nav role='navigation'>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li class="current"><a href="#"><span>About</span></a></li>
      <li><a href="#"><span>Clients</span></a></li>
      <li><a href="#"><span>Contact Us</span></a></li>
    </ul>
  </nav>

CSS

ul {
  width: 50%;
}

li {
  display: inline-block;
  margin-right: -4px;
  width: 25%;
}
li a {
  position: relative;
  border: 1px solid #919196;
  background-color: red;
  box-sizing: border-box;
  padding: 1em;
  display: block;
  -moz-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  width: 100%;
  min-height: 3em;
  text-align: center;
}
li a span {
  color: white;
  position: absolute;
  box-sizing: border-box;
  -moz-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  left: 0;
  width: 100%;
}

.current a {
  background: blue;
}