JSFiddle - React, Tailwind, and code Playground

by mitchbregs

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>INFORMATION PAGE</title>
<link rel="shortcun icon" href="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0600/note_edit.png">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAnMvBxXo9S2OX7r4UAYFk4RTWx8njL9qYLnq46LoOVGM6mIGTuxSw5Vy1t3-Mgam0NeNQzRbf5lkSpw"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<body>
    <div id="header">
        <!--  CONTAINTER -->
        <div id="container">
            <div class="left_plane">
                <div class="logo_area">
                </div>
                <div class="left_nav">
                    <div class="list_header">
                        <h class="font">HELP</h>
                    </div>

                    <span class="about" style="text-decoration: none;"><div class="list_options_selected">
                        <h class="font">What is NoteAd?</h>
                    </div></span>

                    <span class="rules"><div class="list_options">
                        <h class="font">Rules</h>
                    </div></span>

                    <span class="faq"><div class="list_options">
                        <h class="font">Frequently Asked Questions</h>
                    </div></span>

                    <div class="list_header">
                        <h class="font">INFORMATION</h>
                    </div>

                    <span class="team"><div class="list_options">
                        <h class="font">The Team</h>
                    </div></span>

    ...

CSS

body{
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noise_lines.png');
    overflow-x: hidden;
    overflow-y: scroll;
}
.font{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.header{
    font-size: 18px;
    font-weight: 700;
    color: #666666;
}
#header{
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}
#footer{
    z-index: 10;
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    background-image: linear-gradient(bottom, rgb(247,247,247) 0%, rgb(252,252,252) 34%);
    background-image: -o-linear-gradient(bottom, rgb(247,247,247) 0%, rgb(252,252,252) 34%);
    background-image: -moz-linear-gradient(bottom, rgb(247,247,247) 0%, rgb(252,252,252) 34%);
    background-image: -webkit-linear-gradient(bottom, rgb(247,247,247) 0%, rgb(252,252,252) 34%);
    background-image: -ms-linear-gradient(bottom, rgb(247,247,247) 0%, rgb(252,252,252) 34%);

    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(247,247,247)),
    color-stop(0.34, rgb(252,252,252))
    );
    -moz-box-shadow: 0 0 18px #D6D6D6;
    -webkit-box-shadow: 0 0 18px #D6D6D6;
    box-shadow: 0 0 18px #D6D6D6;
    z-index: 2;
}
#footer .inside_footer{
    width: 900px;
    height: 100%;
    position: relative;
    margin: auto;
}
#footer .left_div{
    width: 300px;
    height: 100%;
    position: relative;
    float: left;
}
#footer .right_div{
    width: 600px;
    height: 100%;
    position: relative;
    float: right;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
}
#footer .links{
    color: #1D6391;
    text-decoration: none;
}
#footer .links:hover{
    color: #1D6391;
    text-decoration: underline;
}
#footer .links:active{
    text-decoration: underline;
    color: #1D6391;
}
#footer .facebook{
    margin-top: 15px;
    width: 100px;
    float: left;
}
#footer .twitter{
    margin-top: 15px;
    width: 195px;
    float:...

JavaScript

$(document).ready(function(){

});