JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://postimg.org/image/k3cz1cr2j/"></script>
<script src="http://postimg.org/image/jck8vkop7/"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="container">
<!-- Header contains the banner image -->
<div id="header">
<img id="headerBanner"  src='http://s17.postimg.org/iobecmpzj/banner.jpg' border='0' alt="banner" />
</div>

<!-- Navigation bar for the site -->
<div id="navbar">
	<ul>
		<li>home</li><br>
		<li>bio</li><br>
		<li>news</li><br>
		<li>music</li><br>
		<li>tour</li><br>
		<li>video</li><br>
		<li>contact</li><br>
		<li>press</li><br>
	</ul>
	<ul>
		<li>facebook</li><br>
		<li>twitter</li><br>
		<li>tumblr</li><br>
		<li>instagram</li><br>
	</ul>
</div>

<!-- Represents the content pane -->
<div id="contents">
	<div id="home">
		<a href="./images/home3.jpg" style='margin:0 auto; display: block; width: 60%;'><img src='http://s17.postimg.org/4glpnzdan/home3.jpg' border='0' alt="home3" /></a>
	</div>
	<div id="bio">
		<a href="./images/bio.jpg"><img src="./images/bio.jpg" title="Hi-res photo"/></a>
		<p>Run Coyote is a Canadian rock ‘n’ roll band. The band evokes dark backwoods and haunted city streets through vocal harmonies, melodic bass, and swing and break beats. Run Coyote’s influences are a stew of folk and blues cooked on your grandmother’s woodstove in a farmhouse kitchen. Formed from Sam Allen’s solo project in London, Ontario, Run Coyote is Sam Allen (vocals, guitar), Sam’s brother, Jake Allen (guitar, bass), Andrew Dal Cin (drums), and Amanda Grant (bass, vocals).

	Each band member brings their own experience to Run Coyote—from festivals such as NXNE and CMW, and performances with Canadian bands such as The Wooden Sky, Evening Hymns, Harlan Pepper, and PS I Love You.
		</p>
	</div>
	
	<div id="news">
	</div>
	
	<div id="tour">
	</div>
	
	<div id="contact">
	<p>Bookings:</p>
	<a href="[email protected]">[email protected]</a>
	</div>
	
	<div...

CSS

/*main container */
#container{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

/*header stuff*/
body{
font-size: 0.8 em;
/*background-color: red;*/
}

#header{
display: block;
width: 100%;
padding-left: 0;
background-color: blue;
}

#header img{
width: 100%;
display: block;
}

/*navbar*/

#navbar{
font-family: "Helvetica", "Sans-Serif";
position: static;
text-transform: uppercase;
width: 20%;
float:left;
/*background-color: yellow;*/
}

#navbar ul {
margin-top: 0;
padding-left: 0;
}

#navbar ul li {
list-style-type: none;
display: inline-block;
padding: 0.2em;
}

#navbar ul li:hover {
background-color:#BD2227;
color: #FFFFFF;
cursor: default;
}

/*CONTENT pages*/

/*Display container for all other pages*/
#contents{
width: 80%;
height: 100%;
float: right;
font-family: "Helvetica", "Sans-Serif";
/*background-color: green;*/
}


/*Home*/

#home img{
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	/*border-radius: 15px;
	border: 1px;*/
}

/*Biography*/
#bio{

display: none;

background-color: #f9f9f9;
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;

/*
border: 1px solid #CCCCCC;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 3px 3px 3px rgba(50,50,50,0.28);
-webkit-box-shadow: 3px 3px 3px rgba(50,50,50,0.28);
box-shadow: 3px 3px 3px rgba(50,50,50,0.28);*/

}
#bio img {
	width: 30%;
	display: inline-block;
	/*padding: 1em;*/

	/*
	border-radius: 15px;
	border: 1px;
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 50, 50, 0.86);
	-moz-box-shadow:    0px 0px 12px 0px rgba(0, 50, 50, 0.86);
	box-shadow:         0px 0px 12px 0px rgba(0, 50, 50, 0.86);
*/
}
#bio p{
	width: 60%;
	vertical-align: top;
	display: inline-block;
	margin-top: 0;
	padding-top: 1em;
	padding-left: 1em;
}

/*News*/

#news{
display: none;
margin-right: 1.5em;
background-color: #f9f9f9;
padding-left: 20px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid...

JavaScript

$(document).ready(function(){
	var lastClick= '#home';
	$("li").hover(function(){
		if(lastClick !== "'#" + $(this).text() + "'")
		$(this).css("cursor","pointer");
	});
	$("li").click(function(){
		var newPage = "#" + $(this).text() + "";
		console.log(lastClick);
		console.log(newPage);
		if(lastClick !== newPage){
			$(lastClick).hide("slow",0);
			$(newPage).show("slow",0);
			lastClick = newPage;
		}
	});
});