JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
            	<ul>
                	<li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </nav>

CSS

#nav {
	float: right;
	width: 100%;
	background: #005eab;
	margin: 6.5px;
	padding: 1% 0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
    transform: skew(-15deg);
}

#nav ul {
	display: inline;
	transform: skew(15deg);
}

#nav ul li {
	display: inline;
	padding: 0 0 0 3.5%;
	transform: skew(15deg);
}

#nav ul li a {
	font-weight: 700;
	font-size: 1em;
	font-family: 'Oswald';
	text-decoration: none;
	color: #fff;
	padding: 1.48%;
	transform: skew(15deg);
}

#nav ul li a:hover {
	background-color: #ee2e24;
	transform: skew(15deg);
}