JSFiddle - React, Tailwind, and code Playground

HTML

<div class="links_container">
  <div class="nav1">
  <ul>
    <li><a href="#" class="noBorder leftedge">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Challenges</a></li>
    <li><a href="#">Progress</a></li>
    <li><a href="#" class="rightedge">Forum</a></li>
  </ul>
  </div>
  
</div>

CSS

*{
margin:0;
}
.links_container {
	width: 100%;
	height: 25px;
	background-color: #33C4AB;
	margin-right: auto;
	margin-left: auto;
	border-bottom-style: double;
	border-bottom-width: 2px;
	border-color: #000000;
	/* [disabled]-webkit-box-sizing: inherit; */
	/* [disabled]-moz-box-sizing: inherit; */
	/* [disabled]box-sizing: inherit; */
	position: absolute;
	max-width: 1000px;
}
.nav1 {
	display: inline;
	float: left;
}
.nav1 ul li {
	list-style-type: none;
	float: left;
	display: block;
}
.nav1 ul li a {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #333333;
	display: inherit;
	height: 25px;
	width: 100px;
	text-align: center;
	line-height: 25px;
	border-left: thin solid #CCCCCC;
}
.noBorder {
	border-left-style: none !important;
}
.nav1 ul li a:hover {
	background-color: #6B6B6B;
}
.leftedge {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}
.rightedge {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}