JSFiddle - React, Tailwind, and code Playground

by down_quark

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css">
<script src="http://plupload.com/plupload/js/plupload.full.min.js"></script>
<body class="tundra">
<div id="borderContainer" style="display:none;">
<div id="leftPane">
<div id="actionPane">
<div id="adminActions" style="display:none">
<button id="importUsers" style="display:none">Import Users</button>
</div>
<div id="assessmentActions" style="display:none"></div>
<div id="studyActions" style="display:none;"></div>
<div id="imageActions" style="display:none;"></div>
</div>
</div>
<div id="mainPane"></div>
<div id="footerPane"></div>
</div>
</body>

CSS

html, body {
font:90% helvetica, arial, sans-serif;
height:100%;
margin:0;
overflow:hidden;
width:100%
}
#borderContainer {
height:100%;
width:100%
}
#leftPane {
width:250px
}
#footerPane {
border:hidden;
font-size:0.9em;
height:55px;
padding-top:8px;
text-align:center
}
#mainPane {
height:100%;
width:100%
}
#loader {
background:#fff url('//ajax.googleapis.com/ajax/libs/dojo/1.8/dojox/image/resources/images/loading.gif') no-repeat center center;
height:32px
}

JavaScript

require(["dijit/layout/BorderContainer", "dijit/layout/AccordionContainer",
        "dijit/layout/ContentPane", "dojo/ready", "dojo/dom-construct",
        "dijit/form/Button", "dojo/_base/array", "dojo/sniff", "dijit/Tooltip"
], function (BorderContainer, AccordionContainer, ContentPane, ready, construct,
    Button, array, sniff, Tooltip) {
    ready(function () {
        var statusTable, button = new Button({}, 'importUsers'),
            uploader = new plupload.Uploader({
                runtimes: 'html5,flash,html4',
                browse_button: button.domNode,
                max_file_size: '10mb',
                max_file_count: 50,
                url: '/echo/json/',
                unique_names: false
            });
        uploader.bind('FilesAdded', function (up, files) {
            var html = '<table>';
            array.forEach(files, function (file) {
                html += '<tr id="row' + file.id + '"><td>' + file.name +
                    '</td></tr>';
            });
            html += '<tr><td><div id="loader"></div></td></tr></table>';
            statusTable = construct.create('div', {
                innerHTML: html
            }, 'adminActions');
            setTimeout(function () {
                uploader.start();
            }, 500);
        });
        uploader.bind('Error', function (up, e) {
            up.stop();
            construct.destroy(statusTable);
            construct.create('div', {
                innerHTML: 'Upload failed.  ' + (sniff('ie') ? e.details :
                    'Response code = ' + e.status) + '. ' + e.message + (e.file ?
                    ' File: ' + e.file.name : '')
            }, 'mainPane', 'only');
        });
        uploader.bind('FileUploaded', function (up, file, response) {
            construct.create('div', {
                innerHTML: 'User(s) imported successfully from ' + file.name
            }, 'mainPane');
        });
        uploader.bind('UploadComplete', function (up, files) {
 ...