JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
      <li class="first"><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li class="last"><a href="#">Item</a></li>
    </ul>
</div>

CSS

#nav {
	background-color: #183650;
	overflow: hidden;
}
ul {
	margin: 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
}
li {
	padding: 9px 0;
  list-style: none;
}
li.last,
li.first {
	background: none transparent;
	position: relative;
}
li.last::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1000px;
  height: 100%;
  background-color: #20bef2;
}
li a {
	border: none;
	color: #FFF;
	text-transform: uppercase;
	font-size: 17px;
	letter-spacing: 1px;
	padding: 0.75em 0.7em;
}
li.last {
	background-color: #20bef2;
	border-left: 3px solid #FFF;
}
li a {
  text-decoration: none;
}
li a:hover {
	background: none transparent;
}
li:last-child {
	background-color: #20bef2;
	transform: translateZ(1px) skew(-15deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
li:last-child a {
	transform: translateZ(1px) skew(15deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}