JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="nav">
          	<ul>
                <li id="firstNavItem"><a href="index.html">Home</li>
                <li><a href="Warp.html">Warp</a>
                    <ul>
                    	<li><a href="Warp-how-it-works.html">How it works</a></li>
                        <li><a href="Warp-Engine.html">Warp Engine</a></li>
                        <li><a href="WarpFactors.html">Warp Factors</a></li>
                        <li><a href="">Fuel</a>
                        	<ul>
                        		<li><a href="Anti-Matter.html">Anti-Matter</a></li>
                        		<li><a href="Deuterium.html">Deuterium</a></li>
                           </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="Fact-or-Fiction.html">Fact or Fiction</li>
                <li><a href="StarTrek.html">Star Trek</a>
                    <ul>
                        <li><a href="Enterprise.html">Enterprise</a></li>
                        <li><a href="Voyager.html">Voyager</a></li>
                    </ul>
                </li>
                <li><a href="about.html">About</a></li>
    		</ul>
      </div>

CSS

/* Reset */

* {
	margin:0px;
	padding:0px;
}

.clearFix {
	clear: both;
}

/* Container */

#container {
	width: 960px;
	margin: 50px auto;
}



/* Red */

/* Navigation First Level */

#nav{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size:15px;
}

#nav ul{
	background:#000000;
	height:35px;
	list-style:none;
	border: 3px solid #000000;
	-webkit-border-radius: 6px;
}

#nav li{
	float:left;
	padding:0px;
}

#nav li a{
	background:#000000;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#fff;
	line-height:35px;
	padding:0px 25px;
	-webkit-border-radius: 6px;
	
}

#nav li a:hover{
	text-decoration:none;
	background: #4873b1;
	color:#FFFFFF;
	-webkit-border-radius: 3px;
}

/* Navigation Second Level */

#nav li ul{
	position:absolute;
	background:#000000; 
	display:none;
	height:auto;
	width:210px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	margin-left:-3px;
}

#nav li:hover > ul{
	display:block
}

#nav li li:hover {
	font-weight: 800;
}

#nav li li {
    position:relative;
	display:block;
	float:none;
	width:210px;
}

#nav li ul a{
	text-align:left;
	display:block;
	height:35px;
	padding:0px 10px 0px 25px;
}

#nav li li ul{
	position:absolute;
    top:0;
    left:100%;
}





/* Red */

/* Navigation First Level */

#nav_red{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size:15px;
}

#nav_red ul{
	background:#cfcfcf;
	height:40px;
	list-style:none;
}

#nav_red li{
	float:left;
	padding:0px;
}

#nav_red li a{
	background:#cfcfcf;
	display:block;
	text-align:center;
	text-decoration:none;
	color:#333;
	line-height:40px;
	padding:0px 25px;
	
}

#nav_red li a:hover{
	text-decoration:none;
	background: #915fa6;
	color:#FFFFFF;
}

/* Navigation Second Level */

#nav_red li...