JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<aside class="nav">
		<ul id="mainNav">
			<li class="header">Navigation</li>
			<li>Home</li>
			<li>Send Emails</li>
			<li>Attendance</li>
			<li>Students</li>
			<li>Classes</li>
			<li>Groups</li>
		</ul>
	</aside>
	<div class="main">
		<h1>Overview</h1>
	</div>
</body>

CSS

html {
    height: 100%;
}

body{
			width:100%;
			padding:0;
			margin:0;
			min-width:1150px;
			margin-left:auto;
			margin-right:auto;
			height: 100%;
			min-height:670px;
			background: URL('img/pattern-bnz4.png') repeat;
		}
		aside{
			width:300px;
			float:left;
			background-color:#808080;
            height:100%;
		}
		#mainNav{
			list-style-type: none;
			padding:0; margin:0;
			font-family: 'Roboto', sans-serif;
			font-size:20px;
		}
		#mainNav li{
			text-align:center;
		}
		.header{
			font-family: 'Raleway', sans-serif;
			line-height: 75px;
			font-size:30px;
			margin:0;
			padding:0;
			height:75px;
			background-color: yellow;
		}
		.main{
			width: calc(100% - 305px);
			margin-left:4px;
			float:right;
			background: URL('img/pattern-7dfo.png') repeat;
		}
		.main h1{
			font-family: 'Raleway', sans-serif;
			text-align:center;
			margin:0;
			padding:0;
			height:75px;
			line-height: 75px;
		}