JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

title>Harriton TSA</title>
</head>
<script src="jquery-1.11.0.js"></script>
<script src="jquery.animate-colors.js"></script> 
<script src="jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="jquery.localscroll-1.2.7-min.js"></script> 
<body>


<div id="nav">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li><a class="expandable" href="classes_at_harriton.html">STEM at School</a>
            <ul>
				<li><a href="foundations_of_engineering.html">Foundations of Engineering</a></li>
				<li><a href="cadd.html">CADD</a></li>
				<li><a href="architecture.html">Architectural Renovation</a></li>
                <li><a href="inventionsandinnovations.html">Inventions and Innovations</a></li>
			</ul>
		</li>
		<li><a class="expandable" href="our_chapter.html">Our Chapter</a>
			<ul>
				<li><a href="meet_the_officers.html">Meet the Officers</a></li>
				<li><a href="meet_the_advisors.html">Meet the Advisors</a></li>
                <li><a href="our_meetings.html">Our Meetings</a></li>
			</ul>
		</li>
		<li><a href="http://tsawebmaster1.hhstsa.com/index.html">Design Brief</a></li>
	</ul>
</div>
<div id="sidebar">
<ul>
	<li> <p>Latest News</p>
    <span>Harriton TSA Elects New Offiers. Held by a democratic vote, Harriton TSA is proud to present Won Chong as our chapter 									president. Al Gallo will be serving vice, Jonathan Zauberman will be serving secretary, Caleb Dixon will be serving treasurer, Xinke Chen will be serving reporter, and Benjamin Levitt will be serving Sergeant at Arms. Check out our new official 2013-2014 
    <a href class="whitelink" = "meet_the_officers.html"> officer team </a></span>
	</li>
    <li><p>Interactive Tutorials</p>
    <span> To ensure the maximum learning experience, we have prepared three interactive tutorials on learning website design. One teaches HTML, the second teaches CSS and the third teaches JavaScript. These tutorials enable you to go at your own pace by interacting with the tutorial and even write your own code all...

CSS

@charset "UTF-8";
/* CSS Document */
/*Navigation Bar */
	#nav {
	position:fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	font-family:Arial, Helvetica, sans-serif;
	z-index: 100;
	
}
#nav ul ul {
	display: none;
	z-index:99;
}

#nav ul li:hover > ul {
		display: inline;
	}

#nav ul {
	background: rgb(187, 0, 7);
	color:#FFFFFF; 
	padding: 0px 40px;
	list-style: none;
	position: relative;
	display: inline-table;
	margin: 0px;
	width: 100%;

	
}
#nav ul:after {
		content: ""; clear: both; display: block;
	}
	
#nav ul li {
	float: left;
	margin-left:7px;

}
	#nav ul li:hover {
		background: #37BEFF;
	}
		#nav ul li:hover a {
			color: #fff;
		}
	
	#nav ul li a {
		display: block; padding: 20px 38px;
		color: #ffffff; text-decoration: none;
	}
	
 #nav ul ul {
	background: #818B97; border-radius: 0px; padding: 0px;
	position: absolute; top: 100%;
	margin: 0px;
	padding:0px;
	width:12.5%;
	
	}
	#nav ul ul li {
		float: none; 
		border-top: 1px solid #7C848F;
		border-bottom: 1px solid #79828C;
		position: relative;
		margin:0px;
	}
		#nav ul ul li a {
			padding: 15px 17px;
			color: #fff;
		}	
			#nav ul ul li a:hover {
				background: #37BEFF;
			}
			
/*Sidebar*/
#sidebar {
	height: 100% !important;
	position: fixed;
	top: 58px;
	bottom: 0px;
	right: 0px;
	font-family:Arial, Helvetica, sans-serif;
	z-index: 95;
	overflow-y: hidden;
	
}

#sidebar ul {
	overflow-x: hidden;
	display:inline-table;
	list-style: none;
	padding: 5px;
	margin:0px;
	width:260px;
	float:right;
	display: block;
	background-color:rgb(187,0,7);
	padding: 10px;
	position: relative;
	color: #fff;
	border-left: 45px solid #37BEFF;
	border-style-width:2px;
	transition: right 1.5s ease;
	-webkit-transition: right 1.5s ease;
	-moz-transition: right 1.5s ease;
	-o-transition: right 1.5s ease;
	right: -280px;
	height: 100%;
	overflow-y: hidden;
	
	
}
#sidebar ul:hover {
	right: 0;
}

#sidebar ul li p {
	font-size: 24px;
	font-style: bold;
	display:block;
	padding: 0px;
	margin: 5px 0px 5px...