JSFiddle - React, Tailwind, and code Playground

by mitchbregs

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Post it</title>
<link rel="shortcun icon" href="http://cdn1.iconfinder.com/data/icons/spirit20/post-it.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>
    <script type="text/javascript" src="http://rikrikrik.com/js/jquery.shortkeys.js"></script></head> 
<body>
    <div id="header">
        <input type="image" src="http://cdn1.iconfinder.com/data/icons/brightmix/64/monotone_question.png" class="help_info_question_button">
        <div class="help_info">
            <ol class="font" style="font-size: 14px; margin-right: 15px; margin-bottom: 15px;">
                <li>Start by clicking 'N' on your keyboard or the "Add Note" button on the navigation bar at the bottom right of your screen.</li><br>
                <li>From there you can either add a text note or an image note by clicking on the camera icon.</li><br>
                <li>If you want, you can start by clicking 'I' on your keyboard and that will directly take you to adding an image note.</li><br>
                <li>Fill out the form provided, but make sure you don't exceed 180 characters.</li><br>
                <li>If you're adding an image, make sure you don't forget to include the 'http://'.</li><br>
                <li>Lastly, the sort panel can be accessed by hitting 'S' on your keyboard or simple clicking it on the navigation bar at the buttom...

CSS

body{
    background-image: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noise_lines.png');
    overflow-x: hidden;
    overflow-y: auto;
}
#header{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 1;
    overflow: auto;
}
#header .help_info_question_button{
    margin-right: 5px;
    margin-left: auto;
    margin-top: 5px;
    float: right;
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter:alpha(opacity=3);
    height: 26px;
    width: 26px;
    z-index: 2;
}
#header .help_info_question_button:hover{
    margin-right: 5px;
    margin-left: auto;
    margin-top: 5px;
    float: right;
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=1);
    z-index: 2;
}
#header .help_info{
    margin-right: 5px;
    margin-left: auto;
    margin-top: 10px;
    float: right;
    opacity: 1;
    width: 300px;
    height: 325px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #696969;
    color: #E8E8E8;
    opacity: .7;
    -moz-opacity: .7;
    filter:alpha(opacity=7);
    z-index: 100;
    display: none;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border: 1px solid #858585;
}
.help_info::-webkit-scrollbar {
    width: 5px;
}
.help_info::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.help_info::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(0, 0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.help_info::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(55,0,0,0.4); 
}
#header .keyboard_control_button{
    margin-right: 5px;
    margin-left: auto;
    float: right;
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter:alpha(opacity=3);
    height: 26px;
    width: 26px;
    z-index: 2;
    margin-top: -9px;
}
#header...

JavaScript

$(document).ready(function(){
    var id = 1;
    
    $("#textinput").hide();
    $("#sortPost").hide();    
    $("#imginput").hide();
    $(".add_post_button").click(function(){
        $("#textinput").slideToggle(500);
        $("#imginput").slideUp(500);
        $("#sortPost").slideUp(500);
        $(".help_info").fadeOut(1000);
    });
    $(".sort_by_button").click(function(){
        $("#sortPost").slideToggle(500);
        $("#textinput").slideUp();
        $("#imginput").slideUp();
        $(".help_info").fadeOut(1000);
    });
    $(".search_bar").focus(function(){
        $("#textinput").slideUp(500);
        $("#imginput").slideUp(500);
        $("#sortPost").slideUp(500);
        $(".help_info").fadeOut(1000);
    });
    $(".photoPost").click(function(){
        $("#textinput").slideToggle(500);
        $("#imginput").slideToggle(500);
    });
    $(".textPost").click(function(){
        $("#imginput").slideToggle(500);
        $("#textinput").slideToggle(500);
    });
    $(".text_submit_post").click(function(){
        var currentTime = new Date();
        var month = currentTime.getMonth() + 1;
        var day = currentTime.getDate();
        var year = currentTime.getFullYear();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var ampm;
        var randomBg = Math.floor((Math.random()*14)+1);
        var positionTop = Math.floor((Math.random()*80));
        var positionLeft = Math.floor((Math.random()*80));
        var divnumber = Math.floor((Math.random()*10000));
        var wh = Math.floor((Math.random()*100)+110);
        var rotatedegree = Math.floor((Math.random()-0.5)*4);

        if($(".checkbox").is(':checked')){
            var user = "Anonymous";
        } 
        else{
            var user = "User";
        }

        if (minutes < 10){
            minutes = "0" + minutes
        }
        if (hours > 12){
            var ampm = "PM"
        }
        if (hours <= 12){
           ...