JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="wrapper">
			<header class="main-header">
				<h1>blah blah blah</h1>
				<nav class="main-nav">
					<ul class="main-nav-links">
						<li><a href="#">Home</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">Get a Quote</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</header>

CSS

.wrapper {
	width: 100%;
	min-width: 960px;
}

.main-header {
	position: relative;
	width: 100%;	
	height: 60px;
	background-color: #41a2cd;
}

.main-header > h1{
	float: left;
	margin: 11px 0 0 5px;
	color: #073a4f;
}

.main-nav-links > li {
	list-style: none;
	float: left;
}

.main-nav-links li > a {
	text-decoration: none;
	display: block;
	color: #073a4f;
}

.main-nav-links > li {
	border-right: 1px solid #45b1e1;
}

.main-nav-links li > a:hover {
	background-color: #ffffff;
	/*background-color: #50bae8;*/
}