JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/ProgerXP/FileDrop/master/filedrop.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
<div class="colsize_7">
    <div class="colsize_5 c red">You are uploading files for Job <span id="upl_job_id"></span>
    </div>
    <br class="clear" />
</div>
<div class="colsize_7">
    <div class="colsize_5 c black">Drag and Drop files onto *OR* click the areas to upload. Multiple files are allowed.</div>
    <br class="clear" />
</div>
<ul class="colsize_5 c" id="dz">
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-dwg">drawings</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-ejf">ejf</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-eng">eng</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-ins">install</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-mat">materials</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-pm">proj_mgmt</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-sur">survey</span>

    </li>
    <li class="l">	<span class="fd-file-wrapper">
						<button class="fd-button"></button>
					</span>
	<span class="folderName" id="dz-teo">teo_prep</span>

    </li>
</ul>
<div...

CSS

.fd-file-wrapper {
	height:20px;
	margin:2px;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}
.fd-button {
	height:20px;
}
.fd-file {
	height:50px;
	margin:2px;
	overflow:hidden;
	position:absolute;
	top:-32px;
	right:10px;
	cursor:pointer;
	opacity:0;
}
#dz > li {
	height:64px;
	position:relative;
	list-style:none;
}
span.folderName {
	height:32px;
	font-family:Consolas,monospace;
	font-size:12px;
	border-radius:12px;
	border:1px dashed black;
	background-color:moccasin;
	padding-top:18px;
	text-align:center;
	display:inline-block;
	width:260px;
}
span.folderName:hover {
	background-color:papayawhip;
	border:1px dashed red;
	color:red;
}
#upl_job_id {
	font-weight:bold;
}
#fileprog {
	position:relative;
}
.progLabel {
	position:absolute;
	left:20px;
	font-weight:bold;
	color:#999;
}

JavaScript

$(function () {
    $('#fileprog').progressbar({
        change: function () {
            $('.progLabel').text("Received " + $('#fileprog').progressbar('value') + " of " + $('#fileprog').progressbar('option', 'max') + " bytes");
        },
        complete: function () {
            $('.progLabel').text("File Complete!");
        }
    });
    $('.fd-button')
        .button({
        icons: {
            primary: 'ui-icon-folder-open'
        },
        text: false
    });
    var job_id = $('#upload_dialog').data('job_id');
    var job_number = $('#upload_dialog').data('job_number');
    $('#upl_job_id').text(job_number);
    var fdOptsArea = {
        multiple: true,
        dropEffect: 'copy'
    };
    var processUploads = function (f, subdir) {
        $.each(f, function (i, file) {
            console.log('Processing ' + file.name);
            file.event('sendXHR', function () {
                $('#fileprog').progressbar({
                    value: 0,
                    max: file.size
                });
            });
            file.event('progress', function (curr) {
                $('#fileprog').progressbar({
                    value: curr
                });
            });
            file.sendTo('ajax/ajax.receiveFile.php?subdir=' + subdir + '&job_id=' + job_id);
        });
    };
    $('#dz-dwg')
        .filedrop(fdOptsArea)
        .on('fdsend', function (e, files) {
        processUploads(files, 'drawings');
    })
        .on('filedone', function (e, file) {
        console.log('Upload complete ' + file.name);
    });
    $('#dz-ejf')
        .filedrop(fdOptsArea)
        .on('fdsend', function (e, files) {
        processUploads(files, 'ejf');
    })
        .on('filedone', function (e, file) {
        console.log('Upload complete ' + file.name);
    });
    $('#dz-eng')
        .filedrop(fdOptsArea)
        .on('fdsend', function (e, files) {
        processUploads(files, 'eng');
    })
        .on('filedone', function (e, file) {
  ...