JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
    <link href='http://fonts.googleapis.com/css?family=Pontano+Sans' rel='stylesheet'
    type='text/css'>
    <script type="text/javascript" language="javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="javascript/cycle.js"></script>
    <script type="text/javascript" src="../../lib/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="javascript/jquery.pikachoose.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link type="text/css" href="css/base.css" rel="stylesheet" />
    <title>Untitled Document</title>
  </head>
  
  <body>
    <div class="container">
      <div class="menuBox">
        <div id="littleBox">
          <br/>
        </div>
        <div id="lineDiv">
          <br/>
        </div>
        <div class="menu">	<a href="#" class="options home">HOME</a>

          <br/>
          <br/>	<a href="#" class="options work">WORK</a>

          <br/>
          <br/>
          <ul class="sub WORKMenu" id="artProjects">	<a href="#" class="subLink project1">Confluence</a>
	<a href="#" class="subLink project2">Heat</a>

            <a
            href="#" class="subLink project3">Waiting</a>	<a href="#" class="subLink project4">Worlds</a>
	<a href="#"
              class="subLink project5">Paint</a>
	<a href="#" class="subLink project6">Paperworks</a>

          </ul>	<a href="#" class="options work">DESIGN</a>

          <br/>
          <br/>
          <ul class="sub DESIGNMenu" id="designProjects">	<a href="#" class="subLink project5">Paint</a>

          </ul>	<a href="#" class="options about">ABOUT</a>

          <br />
          <br/>
          <ul class="sub ABOUTMenu">	<a href="#" class="subLink bio">Info</a>
	<a href="#"...

CSS

@charset"UTF-8";

/* CSS Document */
 body {
  /background-color:#b0c4de;
  background-image:url('../images/background2.png');
  //background-attachment:fixed;
}
a:link {
  color:blue;
}
/* unvisited link */
 a:visited {
  color:blue;
}
/* unvisited link */
 a:hover {
  color:#3cdeb6;
}
/* mouse over link */
 a.subLink:link {
  color:#black!important;
}
a.subLink:visited {
  color:#black!important;
}
a.subLink:hover {
  color:#3cdeb6;
}
a.options:link {
  color:#black;
}
a.options:visited {
  color:#black;
}
a.options:hover {
  color:#3cdeb6;
}
a.down:link {
  color:#5d5d5d !important;
}
a.down:visited {
  color:#5d5d5d !important;
}
a.down:hover {
  color:#5d5d5d !important;
}
.nave li a:link {
  color:#999999;
}
/* unvisited link */
 .nave li a:visited {
  color:#999999;
}
/* visited link */
 .nave li a:hover {
  color:#5d5d5d;
}
/* mouse over link */
 .menuBox {
  padding-top:50px;
  padding-bottom:100px;
  background-image:url('../images/menuTrans.png');
  float:left;
  width:200px;
  margin-top: -100px;
  margin-left: -10px;
}
.menu {
  width:100px;
  margin-left: 110px;
  float:left;
  text-align:left;
}
a {
  text-decoration:none;
}
.contentLiner {
  margin-left:0px;
  //background-color:blue;
  height:620px;
  width:500px;
}
.preview {
  display:none;
  float:right;
}
.bottom {
  //border: 1px solid black;
  //float: left;
  display: none;
  height:620px;
  width:800px;
  /* no .font */
}
.info {
  margin-left: 38px;
  margin-top: 10px;
  padding-right: 20px;
}
.guideNumbers .nave {
  margin-top: 0px;
  margin-right: 20px;
  width: auto;
  float: right;
}
.box {
  width: auto;
  float: left;
  font-size: 16px;
  color:#999;
}
.contentMenu {
  position: absolute;
  left:198px;
  top:90px;
  background-color:#FFFFFF;
  width:800px;
}
.options {
  font-size:18px;
  margin-bottom: 20px;
}
.leftLiner {
  width:1000px;
  margin-left:1000px;
}
.container {
  width:1090px;
  height:650px;
  font-family:'Pontano Sans', sans-serif;
}
.header {
  margin-left:122px;
...

JavaScript

// add another project to workMenu dropDown

function addProject(idOfParent) {
  var menu = document.getElementById(idOfParent);
  console.log(menu);
  var newItem = document.createElement("a");
  var newContent = document.createTextNode("HiThere");
  newItem.appendChild(newContent);
  newItem.className = "subLink project7";
  newItem.href = "#";
  console.log(newItem);
  menu.appendChild(newItem);
}

addProject("artProjects");

console.log("hello")
$(".geof").hover(function () {
  $(".collab1").show();
}, function () {
  $(".collab1").hide();
});

$(".justin").hover(function () {
  $(".collab2").show();
}, function () {
  $(".collab2").hide();
});
$(".nico").hover(function () {
  $(".collab3").show();
}, function () {
  $(".collab3").hide();
});

$(".pillow").hover(function () {
  $(".collab4").show();
}, function () {
  $(".collab4").hide();
});

$('#nave-1').click(function () {
  $('.aboutCon,.rustSamp,.rustDraw').fadeOut(30);
  $(".waxSculpt").delay(40).fadeIn(30);
});

$('#nave-2').click(function () {
  $('.aboutCon,.rustSamp,.waxSculpt').fadeOut(30);
  $(".rustDraw").delay(40).fadeIn(30);
});

$('#nave-3').click(function () {
  $('.aboutCon,.rustDraw,.waxSculpt').fadeOut(30);
  $(".rustSamp").delay(40).fadeIn(30);
});

$('#nave-4').click(function () {
  $('.rustDraw,.rustSamp,.waxSculpt').fadeOut(30);
  $(".aboutCon").delay(40).fadeIn(30);
});

$('#nave-5').click(function () {
  $('.thermalLive,.thermalMusic,.thermalAbout').fadeOut(30);
  $(".thermalBW").delay(40).fadeIn(30);
});

$('#nave-6').click(function () {
  $('.thermalBW,.thermalMusic,.thermalAbout').fadeOut(30);
  $(".thermalLive").delay(40).fadeIn(30);
});

$('#nave-7').click(function () {
  $('.thermalLive,.thermalBW,.thermalAbout').fadeOut(30);
  $(".thermalMusic").delay(40).fadeIn(30);
});

$('#nave-8').click(function () {
  $('.thermalLive,.thermalMusic,.thermalBW').fadeOut(30);
  $(".thermalAbout").delay(40).fadeIn(30);
});

$('#nave-9').click(function () {
 ...