JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<nav id="mainNav">
	<div id="navCenter">
		<table>
			<tr>
				<td class="navItem" id="home">Home</td>
				<td class="navItem" id="forums">Forums</td>
				<td class="navItem" id="staff">Staff</td>
				<td class="navItem" id="donate">Donate</td>
			</tr>
		</table>
		<h2>Servername</h2>
	</div>
</nav>
</body>
</html>

CSS

body{
    background-color:black;
}
#staff{
	background-color:#66FF99;
}
#mainNav{
	position:fixed;
	width:100%;
	height:50px;
	z-index:1;
	top:0;
	margin-left:auto;
	margin-right:auto;
}
#navCenter{
	position:relative;
	width:960px;
	background-color:white;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	overflow-x:auto;
}
#navCenter table{
	border-collapse: collapse;
	border-spacing: 0;
	margin:0;
	padding:0;
	padding-top:5px;
	display:inline;
	table-layout: fixed;
	height:48px;
	overflow:hidden;
}
#navCenter td{
	text-align:center;
	width:120px;
	font-size:25px;
	font-family: 'Open Sans', sans-serif;
	height:48px;
}
#navCenter h2{
	padding:0;
	margin:0;
	display:inline;
	float:right;
	margin-left:5px;
	margin-right:5px;
	font-size:35px;
	font-family: 'Open Sans', sans-serif;
}