JSFiddle - React, Tailwind, and code Playground

by Matthew Dewhurst

HTML

<div id="wrapper">
	<div id="logo">This is for the logo</div>
	<div id="navmenu">
	
		<ul id="nav">
			<li><a href="#">Home</a></li>
			<li><a href="#">Holiday</a></li>
			<li><a href="#">Disney</a></li>
			<li><a href="#">Non-Disney</a></li>
			<li><a href="#">Shopping</a></li>
			<li><a href="#">About</a></li>
		</ul>
		
	</div><!--End of navigation div-->
	<div id="content">This is for the content area</div><!--End of content div-->
	<div id="footer">This is for the footer area</div><!--End of footer div-->
</div><!--End of wraparound div-->

CSS

#wrapper {
	height: 600px;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border: 3px solid #000;
	}
	
#logo {
	height: 100px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border: 3px solid #000;
	}
	
#navmenu {
	height: 50px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border: 3px solid #000;
	}
	
#content {
	height: 300px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border: 3px solid #000;
	}

#footer {
	height: 25px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	border: 3px solid #000;
	}
	
	/*Rules of Navigation*/
	/*===================*/

#navmenu ul {
  list-style-type: none;
  }

#navmenu ul li {
	outline: solid 1px red;
	width: 125px;
	text-align: center;
	position: relative;
	float: left;
    display: inline-block;
  }
#navmenu ul li a,visited{
    display: block;
    padding: 10px;
    color: #555;
    text-decoration: none;
}