JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel" rel="stylesheet" type="text/css" />
		
	
	<body>
		<div class="container">
			<header>
			</header>
            <div class="nav-wrap">
			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="#">Coffee Menu</a></li>
					<li><a href="#">Locations</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</nav>
            </div>
			<section class="main">
				Test
			</section>

			<div class="fix"></div>
			<footer>
				Copyright info goes here.
			</footer>
		</div> <!-- /container -->
	</body>
</html>

CSS

body {
	background-color: rgb(210,159,182);
}

.container, .nav-wrap {
	width: 70%;
	margin: 20px auto;
}

.nav-wrap {
    position: fixed;
}

nav {
	width: 25%;
	float: left;
}

nav ul li {
	line-height: 50px;
}

nav ul li a {
	font-family: 'Grand Hotel', cursive;
    font-weight: normal;
    font-size: 31px;
	color: rgb(104,58,122);
	font-weight: 700;
	text-decoration: none;
	display: block; /* reinforce default space */
	border-top: 1px solid rgb(104,58,122);
}

.main {
	float: right;
	width: 75%;
	height: 2000px;
	background-color: rgb(255,255,255);
}

.fix {
	clear: both;
}