JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
	<div class="nav">
		<ul>
			<li><a href="">About</a></li>
			<li><a href="">Text</a>
			</li>
      <li><a href="">Text</a></li>
      </ul>
	</div>
</div>

CSS

#nav{
position: relative;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 70px;
background-color: #363636;
z-index:2;
}

.nav{
width: 100%;
margin: 0px;
height: 70px;
margin-right: 20px;
display: inline-block;
text-align: left;

}
.nav ul{
list-style-type: none;
padding-top: 5px;
position: absolute;
width: auto;
text-align: left;
}
.nav ul li{
margin-right: 15px;
display: inline-block;
width: auto;
}

.nav ul li a{
	color: white;
	text-decoration: none;
	text-transform: uppercase;
}