JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="nav3">
		   <ul>
		   	  <li><a href="#" style="float: left;">Home</a></li>
		   	  <?php
		   	  	if($_SESSION){
		   	  		?> <li><a href="#" style="float: left; border-right: 1px solid #ccc;">Logout</a></li> <?
		   	  	}else{
		   	  		?> <li><a href="#" style="float: left;">Login</a></li>
		   	  		   <li><a href="#" style="float: left; border-right: 1px solid #ccc;">Signup</a></li>
		   	  		<?
		   	  	}
		   	  ?>
		   </ul>
		</div>

    <img style="margin-left: 650; z-index: 9;" src="http://onlinegw.net/nonlinegw/experiment/includes/logo/diagram_v2_22.png">

		<div id="nav">
		   <ul> 
		      <li><a href="#" style="float: left">XBOX360</a></li>
		      <li><a href="#" style="float: left">XBOX1</a></li>
		   	  <li><a href="#" style="float: left">PS3</a></li>
		      <li><a href="#" style="float: left; border-right: 1px solid #ccc;">PS4</a></li>
		   </ul>
		</div>
	</body>

CSS

/** LEFT SIDE **/
#nav {
	width: 100%;
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc;
}

#nav ul {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-left: 1px solid #ccc;
    margin-left: 0;
}

#nav li:first-child a {
    border-left: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    background-color: #fff;
}

/** TOP BAR **/
#nav3 {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    text-align: center;
    vertical-align: text-top;
}

#nav3 ul {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#nav3 li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-left: 1px solid #ccc;
    vertical-align: super;
}

#nav3 li:first-child a {
    border-left: 1px solid #ccc;
}

#nav3 li a:hover {
    color: #c00;
    background-color: #fff;
}

/** LOGO **/
#logo {
	width: 50%;
	float: center;
	padding: 0;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc;
}

h4.logo-text {
	display: inline;
	text-decoration: none;
	margin:0;
    color:#66bbd4;
    font-family:Tahoma;
    font-size: 15;
}

img.logo { 
	margin-right: auto;
	margin-left: auto;
	padding-left: 635;
	margin-right: 4px;
	height: 50px;
	width: 50px;
	vertical-align: middle;
}