JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="header">
<div id="nav">
	<div class="logo"><h1>Health Numeric ©</h1>Live a Something Life</div>
    <div style="display:inline-block">
	<ul>
		<li><a href="#"><img class="icons" src="img/icons/dashboard.png" />Dashboard</a></li>
		<li><a href="#"><img class="icons" src="img/icons/patient.png" />Patients</a></li>
		<li><a href="#"><img class="icons" src="img/icons/devices.png" />Devices</a></li>
		<li><a href="#"><img class="icons" src="img/icons/account.png" />Account</a></li>
		<li><a href="#"><img class="icons" src="img/icons/support.png" />Support</a></li>
	</ul>
    </div>
    <div class="end"><strong>LifeView</strong> Portal</div>
</div>
<div id="subnav">
<span class="clientname">Patient: Brian Town</span>
</div>
    </div>
<div id="bod">
<h1> test</h1>
</div>
</body>

CSS

@charset "utf-8";
#nav h1 {
	font: Verdana, Geneva, sans-serif;
	font-size: 24px;
	margin-bottom: 2px;
}
.logo {
	width: 190px;
	margin:  auto 80px auto 50px;
	display: inline-block;
	vertical-align: top;
}

#header {
    position: fixed;
}
#nav {

	/*height: 65px;*/
	width: 100%;
	float: left;
	left: 0px;
	margin: 0px;
	padding: 0px;
	color: #FFFFFF;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #0389FF 0%, #000000 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #0389FF 0%, #000000 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(top, #0389FF 0%, #000000 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0389FF), color-stop(1, #000000));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #0389FF 0%, #000000 100%);
	/* W3C Markup, IE10 Release Preview */ 
	background-image: linear-gradient(to bottom, #0389FF 0%, #000000 100%);
}
#nav ul {
	list-style: none;
	width: 540px;
	margin: 0 auto;
	padding: 0; 
}
#nav li {
	float: left; 
}
#nav li a {
	display: inline-block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	border-right: 1px solid #ccc; 	
}
#nav li:first-child a {
	border-left: 1px solid #ccc; 
}
#nav li a:hover {
	color: #23afff;
}
.end {
	width: 200px;
	margin: 10px auto auto 50px;
	display: inline-block;
	word-spacing: 20px;
	vertical-align: top;
}
strong {
	font: Verdana, Geneva, sans-serif;
	font-size: 36px;
	margin-bottom: 2px;
}
.icons {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1px;
	height: 35px;
	width: 35px;
}
#subnav {
    
	overflow:hidden;
	height: 20px;
	width: 100%;

	margin: 0px;
	padding: 0px;
	border: 1px solid #333;
	border-bottom: 1px solid #ccc;
	color: #000000;
	/* IE10 Consumer Preview */ 
	background-image: -ms-linear-gradient(top, #666666 0%, #FFFFFF 100%);
	/* Mozilla Firefox */ 
	background-image:...