JSFiddle - React, Tailwind, and code Playground

HTML

<!-- complete the heading and stuff --><div class="load"></div>

<div class="intro">
	<!-- <div class="intS" ><div class="ShineSub" ></div></div> -->
	<img class="intF" src="../images/EvisiionFramePiece_Fog.png">
	<img class="intB" src="../images/EvisiionFramePiece.png">
	<img class="int0" src="../images/EvisiionFramePiece0.png">
	<p>Loading all sorts of great stuff...</p>

</div>

<!-- begin layer one stuff -->
<!-- dev notes: we're going to want to fill with a dark background, float three divs to
the right, each holding three inner divs; a left edge image, a textured center, and a 
right edge image. Then simply include the logo floating to the left, place the three nav 
images within the textured center divs, and absolutely position a div with no background, 
but a thick blue border with a slight inner box shadow. -->
<div class="layer1">

	<img class="logo" src="../images/nav_Logo.png">
		
	<div class="nav3">
		<img src="../images/bg_edge_3.jpg" class="nav-corner">
		<img src="../images/nav_Portfolio.png" id="Portfolio">
	</div>
	
	<div class="nav2">
		<img src="../images/bg_edge_2.jpg" class="nav-corner">
		<img src="../images/nav_QuickQuote.png" id="ContactUs">
	</div>

	<div class="nav1">
		<img src="../images/bg_edge_1.jpg" class="nav-corner">
		<img src="../images/nav_ClientArea.png" id="QuickQuote">
	</div>
	
	<div class="layer1-glow">
	</div>
	
</div>
<!-- complete layer one stuff --><!-- begin layer two stuff -->
<!-- dev notes: let's float three divs; he first being 25% width, the second being 50%,
and the third being 25%. Drop the Quick quote image into the first div, place the three 
label divs and text into the second div, and, in the third, just use a paragraph element 
and some margin, background color, and padding. -->
<div class="layer2">

	<div class="left">
		<img src="../images/layer2_QuickQuote.png">
	</div>

	<div class="center">
	
		<div class="labor">
			<p>Labor:</p>
		</div>
		
		<div class="rate">
			<p>Rate:</p>
		</div>
		
		<div...

CSS

@font-face {
    font-family:'bebasregular';
    src: url('../fonts/BEBAS___-webfont.eot');
    src: url('../fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body, div {
    margin: 0;
    padding: 0;
}
p {
    margin:0px;
}
body, html {
    height:100%;
    width:100%;
    margin: 0;
    padding: 0;
    cursor:auto;
    overflow:hidden;
    font-family:'bebasregular';
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border: 0;
}

body,html {
	min-width: 1120px;
}

.layer1 {
	width: 100%;
	height: 65px;
	background-color: #000a33;
	overflow: hidden;
}

.logo {
	float: left;
	height: 40px;
	margin: 11px;
}

.nav1,.nav2,.nav3 {
	float: right;
	height: 65px;
}

.nav1 {
	background-image: url('../images/bg_texture_1.jpg');
}

.nav2 {
	background-image: url('../images/bg_texture_2.jpg');
}

.nav3 {
	background-image: url('../images/bg_texture_3.jpg');
}

.nav-corner {
	float: left;
}

#ContactUs,#Portfolio,#QuickQuote {
	height: 50px;
	margin: 7px;
	cursor: pointer;
}

#ContactUs:hover,#Portfolio:hover,#QuickQuote:hover {
	-webkit-filter: hue-rotate(200deg);
}

.layer1-glow {
	position: absolute;
	width: 100%;
	height: 57px;
	border-style: solid;
	border-width: 4px;
	border-color: #01b2fe;

	-webkit-box-shadow: 0px 0px 7px 0px #01b2fe inset;
	box-shadow: 0px 0px 7px 0px #01b2fe inset;
	pointer-events: none;
}

.layer2 {
	height: 60px;
	width: 100%;
	background-color: white;
	overflow: hidden;
	border-width: 4px 0px 4px...

JavaScript

//website lists
SplashPageLists = [
    [
        "General",
    0, [
        ["I have a website, I just need a splash page created for it.", 0],
        ["I have a splash page that I want to be upgraded.", 5],
        ["I need a website created for this new splash page.", 10]
    ]],
    [
        "Design",
    0, [
        ["I have images or examples of what I want this to look like.", 2],
        ["I can tell you basically what I want this to look like.", 4],
        ["I want you to be creative and design it. Make it amazing.", 8]
    ]],
    [
        "Graphic",
    1, [
        ["I need some custom graphics made.", 2],
        ["I need graphic mouse-over buttons.", 2],
        ["I need stock photos integrated.", 4]
    ]],
    [
        "Animation",
    1, [
        ["I need an animated javascript navigation area.", 3],
        ["I need simple javascript animations.", 2],
        ["I need small javascript functions in my page.", 3]
    ]],
    [
        "Content",
    0, [
        ["I will add my own content.", 0],
        ["I will supply content for this page.", 1],
        ["I want you people to write some great content for this page.", 3]
    ]],
    [
        "Social",
    1, [
        ["I need social media buttons integrated into this page.", 1],
        ["I need advanced social media activity integration.", 4],
        ["I want social media accounts created and linked to this page.", 5]
    ]],
    [
        "Public",
    1, [
        ["I need a contact form in this page.", 1],
        ["I need email auto-responders.", 4],
        ["I need google maps integration.", 5]
    ]],
    [
        "Management",
    0, [
        ["I'll manage and update this site's code on my own.", 0],
        ["I'm going to use an Evisiion management package.", 0],
        ["I need an admin panel integrated for self-management.", 4]
    ]]
];
GamingWebsiteLists = [
    [
        "General",
    1, [
        ["I have a website, I just need a splash page created for it.", 2],
 ...