JSFiddle - React, Tailwind, and code Playground

by leggosteveo

HTML

<link rel="stylesheet" href="jquery-ui.css">
		<title>
			GDQ Site
		</title>
		<script src="jquery.js"></script>
		<script src="jquery-ui.js"></script>
		<style>
		.ui-tabs-vertical { width: 55em; }
		.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
		.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
		.ui-tabs-vertical .ui-tabs-nav a { display: block; }
		.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width 1px; }
		.ui-tabs-vertical .ui-tabs-panel { padding: 1 em; float:right; width: 40em; }
		</style>
	<body>
		<div id="bannerDiv"  style=" width: 1000px; margin: 2px auto;" text-align="center"><a href="gdoSite.html"><img src="gdoTBBanner.jpg" width="1000" height="260"></a></div>
		<div id="tabs" style="width: 1000px; margin: 4px auto; padding: 0px;">
			<ul id="menu">
				<li><a href="#home">Home</a></li>
				<li id="aboutLink"><a href="#about">About</a>
					<ul id="subNav" style="color: #220c00;">
						<li><a href="#">About Iota</a></li>
						<li><a href="#">Chapter History</a></li>
						<li><a href="#">Chapter Officers</a></li>
						<li><a href="#">Community Partners</a></li>
						<li><a href="#">Chapter Events</a></li>
						<li><a href="#">Interested in Iota</a></li>
					</ul>
				</li>
				<li><a href="#photos">Photos</a></li>
				<li><a href="#contactUs">Contact Us</a></li>
				<li><a href="www.iotaphitheta.org">National Site</a></li>
				<li><a href="#">Brothers Only</a></li>
			</ul>
			<div id="home">
				<span id ="wordsFromPolaris"> Words from the Polaris </span>
				<p>
					
					 Welcome to the home page of the GDQ graduate chapter of Iota Phi Theta Fraternity Inc.
				</p>
			</div>
			<div id="about">
				<p>
					The GDQ graduate chapter of Iota Phi Theta Fraternity Inc. started with...
				</p>
			</div>
			<div...

CSS

body {
		background-image: url(gdoSiteBGround.jpg);
		background-size: cover;
}


#bannerDiv {
	box-shadow: 2px 6px 8px black, -2px 6px 8px black; 
}

#tabs {
min-height: 600px;
box-shadow: 2px 0px 8px black, -2px 0px 8px black; 
}

#home, #about, #photos, #contactUs {
	min-height: 600px;
}

#subNav {
	background-color: #d3d3d3;
	position: absolute;
	top: 12px;
	left: 16px;
	color: white;
	z-index: 100;
	width: 14em;
}

.subNavFont {
	color: #220c00;
}

.subNav {
	display: none;
}

JavaScript

main = function () {
    $("#tabs").tabs();
		$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
		$("tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
	$('#subNav').addClass('subNav');
    $('#aboutLink').hover(function () {
    	$('#subNav').removeClass('subNav');
    	$('#subNav').addClass('subNavFont');}, 
    	function () { $('#subNav').addClass('subNav');
    	$('#subNav').removeClass('subNavFont');});
    	$('#aboutLink').hover(function () {
    	}, function () { });	
};
$(document).ready(main);