JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://demos.oterox.com/ovacion-master/assets/css/reset.css">
<nav>
	<h2>logo</h2>
	<ul id="steps">
		<li><a href="">one</a></li>
		<li><a href="">two</a></li>
		<li><a href="">three</a></li>
		<li><a href="">four</a></li>
		<li><a href="">five</a></li>
		<li><a href="">six</a></li>
	</ul>
    <p>more links</p>
    <p>more links</p>
    <p>more links</p>
</nav>

<div id="main-container" class="clearfix">
	
	<div id="main-header">
		<p>lorem ipsum</p>
	</div>

	<div id="main-area">

		<section class="step-1">
			
			<div class="box" data-panel="panel-option1">
				<a href="#">option1</a>
			</div>
			<div class="box" data-panel="panel-option2">
				<a href="#">option2</a>
			</div>
			<div class="box" data-panel="panel-option3">
				<a href="#">option3</a>
			</div>
			<div class="box" data-panel="panel-option4">
				<a href="#">option4</a>
			</div>
			
		</section>

		<section class="step-2">
					
		</section>
		
		<section class="step-3">
						
		</section>
		
		<section class="step-4">
				
		</section>
		
		<section class="step-5 ">
		
		</section>
		
		<section class="step-6">
					
		</section>
		
		
	</div>

</div>

CSS

html,body {  margin:0;padding:0;}
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}


/* General 
-------------------------------------------------------------------------------*/
nav {
	float: left;
	/*display: none;*/
	background-color: #112943;
	width: 324px;
height: 100vh;
}
nav a {
	color: #FFF;
}

nav h2 {
	margin: 0;
	padding: 1em;
	color: #FFF;
	background-color: #015C89;
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
	font-weight: 300;
	font-size: 2em;
	height: 160px;
}

nav ul li a {
	display: block;
	padding: 1em 1em 1em 1.2em;
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	color: #111;
	text-transform: uppercase;
	text-shadow: 0 0 1px rgba(255,255,255,0.1);
	letter-spacing: 1px;
	font-weight: 400;
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;
}

nav ul li a {
	color: #FFF;
	height: 115px;
	line-height: 115px;
	text-decoration: none;
	padding: 0 0 0 30px;
}
nav ul li {
	width: 324px;
}


nav ul li:nth-child(1) {
	background-color: #B3B3B3;
}
nav ul li:nth-child(2) {
	background-color: #BABABA;
}
nav ul li:nth-child(3) {
	background-color: #C7C7C7;
}
nav ul li:nth-child(4) {
	background-color: #CCCCCC;
}
nav ul li:nth-child(5) {
	background-color: #D5D5D5;
}
nav ul li:nth-child(6) {
	background-color: #DDDDDD;
}

nav ul li.passed:nth-child(1) {
	background-color: #0075A0;
}
nav ul li.active {
	background-color: #FFFFFF;
}
nav ul li.active a {
	color: #002542;
}

#main-container {
	width: 100%;
	height: 100%;
	background-color: #EEE;
}
#main-header {
	height: 160px;
	line-height: 160px;
	background-color: #005C85;
	text-align: center;
	font-size: 30px;
	color: #fff;
}
#main-area {
	position: relative;
	height: 100%;
	overflow: hidden;
	background-color: #EEE;
}
#main-area section {
	display: none;
}
#main-area section:first-child {
	display: block;
}

.step-1 {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.step-1 > div {
	position:...