JSFiddle - React, Tailwind, and code Playground

by mitchbregs

HTML

<html>
<head>
    <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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Post it</title>
<head>
</head>
<body> 
    <div id="header">
    <div id="textinput">
        <form action="" method="">
        <textarea class="text_input" maxlength="180" placeholder="Do you have something to say?" required></textarea>
        <div class="float_left" style="width: 200px; padding-top: 11px; padding-left: 8px;">
            <input type="button" class="text_submit_post font" style="font-size: 14px" value="Post" />
            <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
        </div>
        </form>
        <div class="float_right" style="width: 20px;">
            <input type="image" class="photoPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/photo.png">
        </div>
    </div>
    <div id="imginput">
        <form action="" method="">
        <input type="text" class="img_input" placeholder="Image URL goes here." required>
        <input type="text" style="margin-top: 15px" class="img_input img_comment" placeholder="Add a comment." required>
        <div class="float_left"  style="width: 200px; padding-top: 11px; padding-left: 8px;">
            <input type="button" class="img_submit_post font" style="font-size: 14px" value="Post">
            <input type="checkbox" class="checkbox"><h class="font" style="font-size: 14px; color: gray; font-style: italic;">Anonymously</h>
        </div>
        </form>
        <div class="float_right">
            <input type="image" style="height: 14px; width: 14px" class="textPost" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/text_letter_t.png">
        </div>
    </div>
    <div id="sortPost">
        <span class="sort...

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::-webkit-scrollbar {
    width: 5px;
}
#header::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#header::-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); 
}
#header::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(55,0,0,0.4); 
}
.font{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.text_submit_post:hover, .img_submit_post:hover{
    color: gray;
}
.float_right{
    float: right;
}
.float_left{
    float: left;
}
.center_text{
    text-align: center;
}
#footer{
    position: fixed;
    width: 100%;
    right: 0px;
    left: 0px;
    bottom: 0px;
    padding: 20px;
    height: 40px;
    background-color: #FCFCFC;
    border-top: 1px solid #E3E3E3;
    -moz-box-shadow: 0 0 11px #DEDEDE;
    -webkit-box-shadow: 0 0 11px #DEDEDE;
    box-shadow: 0 0 11px #DEDEDE;
    z-index: 100;
}
#footer .footer_float_right{
    float: right;
    margin-right: 40px;
}
#footer .footer_float_left{
    float: left;
    margin-left: 5px;
}
#footer .sign_up_button{
    border: 1px solid #D9D9D9;
    outline: none;
    background-image: linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
    background-image: -o-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
    background-image: -moz-linear-gradient(bottom, rgb(240,240,240) 34%, rgb(237,237,237) 67%, rgb(242,242,242) 79%);
    background-image: -webkit-linear-gradient(bottom, rgb(240,240,240) 34%,...

JavaScript

$(document).ready(function(){
    $("#textinput").hide();
    $("#sortPost").hide();    
    $("#imginput").hide();
    $(".add_post_button").click(function(){
        $("#textinput").slideToggle(500);
        $("#imginput").slideUp(500);
        $("#sortPost").slideUp(500);
    });
    $(".sort_by_button").click(function(){
        $("#sortPost").slideToggle(500);
        $("#textinput").slideUp();
        $("#imginput").slideUp();
    });
    $(".search_bar").focus(function(){
        $("#textinput").slideUp(500);
        $("#imginput").slideUp(500);
        $("#sortPost").slideUp(500);
    });
    $(".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()*10)+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)*16);

           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){
            var ampm = "AM"
        }

        var post = $(".text_input").val()

        $("#header").append("<div class='draggable'...