JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
    <head>
        <base href="http://enginelabs.ca">
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        
        <title>Engine Labs - Digital Design and Development </title>

        <link rel="Shortcut Icon" href="">
        
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/clearfix.css" />
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="css/ie_styles.css" />
        <![endif]-->
        
        <script type="text/javascript" src="http://enginelabs.ca/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="http://enginelabs.ca/jquery-ui-1.8.14.custom.min.js"></script>
        <script type="text/javascript" src="http://enginelabs.ca/jquery.dimensions.js"></script>

        <script type="text/javascript" src="http://enginelabs.ca/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="http://enginelabs.ca/functions.js"></script>
        
        <!-- ///////////////////////////// typekit /////////////////////////////////-->
        <script type="text/javascript" src="http://use.typekit.com/fbo7noi.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>        
        
    </head>
    
    <body>

        
        <script type="text/javascript">
            $(document).ready(function(){
                
                var currPage = "";
                
                $("#nav_links li a[href='"+ currPage +"']").addClass("currPage");
                
            });
        
        </script>
        
        <div id="header">
            <div id="logo_nav" class="clearfix">
                <div id="logo"><a href="index.php"><img src="images/logo.png"...

CSS

/* Colors 

engine logo red : #ff4a51;
contact info light red : #FFA1B4; 

menu header dark blue : #dbf3f3;
menu background light blue : #e6ffff;
nav header text dark blue : #798a9c;

project header yellow : #fffc00;

////////////////////Type kit fonts/////////

.anivers : Anivers sans-serif font;
.adelle : Adelle slab serif font;
.tk-atrament : atrament sans-serif condensed sans-serif font;

*/

body{
    font-family:Arial, Helvetica, sans-serif;
}

#header{
    position:fixed;
    z-index:1000;
    width:100%;
}

/* //////////////////////  Header Menu  //////////////////////////////// 
//////////////////////////////////////////////////////////////////////*/

/*////////////  Logo  //////////*/

#logo_nav{
    padding:15px 0px 30px 0px;
    background:white;
}

#logo_nav > div{
    float:left;
    margin-left:20px;
}

/*////////////  navigation  //////////*/

#nav{
    width:550px;
    margin-top:10px;
}

#nav_links{
    margin-left:30px;
}

#nav ul{
    
}

#nav ul li{
    line-height:1.2em;
    display:inline;
    margin-left:35px;
}

#nav ul a{
    font-size:14px;
    text-decoration:none;
    font-weight:bold;
    color:#bbb;
    display:inline-block;
    padding:3px 10px 3px 10px;
}

#nav ul a:hover{
    background-color:#e6ffff;
    color:#666;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

.currPage{
    background-color:#e6ffff;
    color:#666 !important;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

/*////////////  Get in touch  //////////*/

#logo_nav #getin_touch{
    position:absolute;
    right:36px;
}

#getin_touch h2{
    color:#ff4a51;
    font-size:14px;
}

#getin_touch a{
    color:#777;
}

#getin_touch a:hover{
    text-decoration:none;
}

#getin_touch p{
    color:#aaa;
    font-size:12px;
    line-height:1.5em;
    letter-spacing:1px;
    padding:7px 0px 0px 0px;
    text-align:right;
}

#getin_header{
    text-align:right;
}

#getin_header h2{
   ...

JavaScript

$(document).ready(function(){
                
                //////////////////////// horizontal layout ////////////////////////////////
                //wraps the project divs in a table for horizontal layout
                $('#main_content').wrapInner('<table><tr>');
                $('.project').wrap("<td>");
                
                // adjust the projects height for scroll
                var projHeight = $(window).height()-135;
                var windowHeight = $(window).height();
                $('#main_content .project').css("height", projHeight);
                //alert(projHeight +" : "+ windowHeight);

                
                /*
                ************************************************************
                ** Pan across projects
                ************************************************************
                
                */
                
                ///////////////////// grab icon ///////////////////////////////                
                
                $(".project").mousedown(function(){
                    $(this).toggleClass('grabbing');
                });
                
                $(".project").mouseup(function(){
                    $(this).toggleClass('grabbing');
                });
                
                
                
                var $scroll_content = $('#main_content');
                var totalContent = $('#main_content table').width();
                var visibleWidth = $(window).width() - 140;
                
                ///////////////////// scroll by dragging ///////////////////////////////
                var containX = ($(".projects").width()) - 1000;
                $(".projects").draggable({axis: "x", handle: ".projects", containment: [-containX, 0, 0, 0]
                });
                
            });