JSFiddle - React, Tailwind, and code Playground

by rkumarnirmal

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="/files/css/cover.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="/files/js/cover.js"></script>
<script type="text/javascript" src="/files/js/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
    {
        $.ajaxFileUpload
        (
            {
                url:'background/',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',
                data:{name:'logan', id:'id'},
                success: function (data, status)
                {
                    alert("success");
                }
            }
        )
        
        return false;

    }
</script>
</head>
<body>
<div id="box_bg">
<div id="box">
<a class="headers" href="#">BACKGROUND</a>
    <div class="boxcontent boxcontentbg">
        <input type="button" id="uploadbg" value="Upload a background" class="bluebutton button-wide" />
    <form id="uploadform">
        <input type="file" name="fileToUpload" id="fileToUpload" value="Upload" />
        <input type="submit" value="Upload" id="upload" class="bluebutton" onclick="return ajaxFileUpload();" />
        <input type="button" value="Cancel" id="uploadcancel" class="bluebutton buttoncancel" />
        </form>
    </div>
    <div class="line-separator"></div>
<a class="headers" href="#">TEXT</a>
<div class="boxcontent"><p>abcdefghijklmnopqrstuvwxyz</p></div>
    <div class="line-separator"></div>
<a class="headers" href="#">FONT</a>
<div class="boxcontent"><p>abcdefghijklmnopqrstuvwxyz</p></div>
    <div class="line-separator"></div>
<a class="headers" href="#">COLOR</a>
<div class="boxcontent"><p>abcdefghijklmnopqrstuvwxyz</p></div>
    <div...

CSS

#box_bg {
cursor: move;
background-color: #4f575e;
border-radius: 10px;
-moz-box-shadow: 0px -3px 3px 1px #4f575e;
-webkit-box-shadow: 0px -3px 3px 1px #4f575e;
box-shadow: 0px 0px 3px 1px #4f575e;
width: 225px;
height:auto; 
padding-top: 20px;
margin-left: 100px;
margin-top: 150px;
}


#box {
cursor: pointer;
background-color: #24272a;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
box-shadow: 0px 0px 5px 1px #4f575e;
width: 225px;
padding-top: 10px;
padding-bottom: 10px;
word-wrap: break-word;
}

@font-face {
font-family: Tahoma;
src: url("tahoma.ttf");
}

a {
padding: 10px;
display: block;
font-family: Tahoma;
font-size: 11px;
color: white;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.boxcontent {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.boxcontentbg {
    line-height: 40px;
}

.line-separator{
height:1px;
background:#717171;
border-bottom:1px solid #313030;
}

.bluebutton {
display: inline-block;
padding: 7px 20px;
font-size:11px;
border:0;
line-height:16px;
color:white!important;
text-align:center;
background-color:#009AE7;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

.bluebutton:hover {
color:#393F44!important;
background:white;
text-decoration:none!important;
}

.buttoncancel {
background:#4F575E;
}

.button-wide {
width: 180px;
}

#uploadform {
    display:none;
}

JavaScript

$(function() {
$.ajaxSetup({ 
     beforeSend: function(xhr, settings) {
         function getCookie(name) {
             var cookieValue = null;
             if (document.cookie && document.cookie != '') {
                 var cookies = document.cookie.split(';');
                 for (var i = 0; i < cookies.length; i++) {
                     var cookie = jQuery.trim(cookies[i]);
                     // Does this cookie string begin with the name we want?
                 if (cookie.substring(0, name.length + 1) == (name + '=')) {
                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                     break;
                 }
             }
         }
         return cookieValue;
         }
         if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
             // Only send the token to relative URLs i.e. locally.
             xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
         }
     } 
});
    $("#box_bg").draggable({scroll: false, cancel: "div#box"});
    $("#box").accordion({collapsible:true, header: "a.headers", fillspace:true, autoHeight:false});
    $("#uploadbg").click(function(){
        $("#uploadform").show('slow');
        $("#uploadbg").hide();
    });
    $("#uploadcancel").click(function(){
        $("#uploadform").hide();
        $("#uploadbg").show('fast');
    });
})