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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://www.david-haigh.com/JS/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.david-haigh.com/JS/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="http://www.david-haigh.com/JS/js/jquery.localscroll.js"></script>
<script>
    jQuery(document).ready(function() {
        $.localScroll({
           axis:'xy',
   queue:true //one axis at a time
        
        });
    });
</script>

<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#p1">Project 1</a></li>
        <li><a href="#p2">Project 2</a></li>
        <li><a href="#p3">Project 3</a></li>
        <li><a href="#p4">Project 4</a></li>
        <li><a href="#p5">Project 5</a></li>
        <li><a href="#p6">Project 6</a></li>
      </ul>
    </li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div id="wrapper">
  <div id="p1" style="background:#006699;">
    <div id="p1-1" class="project"><a href="#p1-2" class="right"></a>
    </div>
    <div id="p1-2" class="project"><a href="#p1-1" class="left"></a> <a href="#p1-3" class="right"></a></div>
    <div id="p1-3" class="project"><a href="#p1-2" class="left"></a> <a href="#p1-4" class="right"></a></div>
    <div id="p1-4" class="project"><a href="#p1-3" class="left"></a> <a href="#p1-5" class="right"></a></div>
    <div id="p1-5" class="project"><a href="#p1-4" class="left"></a> <a href="#p1-6" class="right"></a></div>
    <div id="p1-6" class="project"><a href="#p1-5" class="left"></a></div>
  </div>
  <div id="p2" style="background:#33CC99;">
    <div id="p2-1" class="project"><a...

CSS

@charset "UTF-8";
/* CSS Document */

/* Main Layout */
body { overflow:hidden; background:#000000; padding:0; margin:0; height:100%; }
#wrapper { width:100%; float:left; margin-top: 40px; height:100%; }

/* Project Divs */
#p1, #p2, #p3, #p4, #p5, #p6 { height:800px; width:7206px; position:relative; overflow:hidden; }
.project { width:1198px; height:100%; /*temp*/ margin: auto; border:1px solid #ffffff; display:block; padding:0; float:left; position:relative; }
.projectcontent { position: absolute; left: 30px; background:#000000; padding:10px 15px; }

/* Main Navigation */
.menu { position:fixed; height: 40px; z-index:9999; float:left; width:100%; border:none; border:0px; margin:0px; padding:0px; 
        font:11px Tahoma, Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; }
.menu ul { background:#000000; height:40px; list-style:none; margin:0; padding:0; }
.menu li { float:left; padding:0px; }
.menu li a { background:#000000; color:#cccccc; display:block; font-weight:normal; line-height:40px; margin:0px; padding:0px 25px; 
        text-align:center; text-decoration:none; }
.menu li a:hover, .menu ul li:hover a { background: #2580a2; color:#FFFFFF; text-decoration:none; }
.menu li ul { background: url(images/dropdown-bg-2.png); display:none; height:auto; padding:0px; margin:0px; border:0px; 
        position:absolute; width:225px; z-index:200; /*top:1em;
        /*left:0;*/ }
.menu li:hover ul { display:block; }
.menu li li { display:block; float:none; margin:0px; padding:0px; width:225px; }
.menu li:hover li a { background:none; }
.menu li ul a { display: block; font-size: 12px; font-style: normal; height: 30px; line-height: 30px; margin: 0; padding: 0 5px 3px 10px; text-align: left; }
.menu li ul a:hover, .menu li ul li:hover a { background:#000000; border:0px; color:#ffffff; text-decoration:none; }
.menu p { clear:left; }

/* Arrows */
.left { display:block; width:30px; height:40px; background:url(http://www.david-haigh.com/JS/images/left.png)...