JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://wavereports.net/temp/filedrop.js"></script>
    <div class="dropzone" id="dropzone1"></div>
    <div class="dropzone" id="dropzone2"></div>
    <div class="dropzone" id="dropzone3"></div>
    <div class="dropzone" id="dropzone4"></div>

CSS

* {margin:0;padding:0;}
.dropzone {
    width:200px;
    height: 200px;
    margin: 10px;
    background:red;
    float:left;
    border: solid 3px transparent;
}
.dropzone.active {background:lime};
.active-hover {border-color:lime !important;}

JavaScript

$('#dropzone1').filedrop({
    fallback_id: 'upload_button',    // an identifier of a standard file input element
    url: 'upload.php',              // upload handler, handles each file separately
    paramname: 'userfile',          // POST parameter name used on serverside to reference file
    data: {
        param1: 'value1',           // send POST variables
        param2: function(){
            return calculated_data; // calculate data at time of upload
        },
    },
    headers: {          // Send additional request headers
        'header': 'value'
    },
    error: function(err, file) {
        switch(err) {
            case 'BrowserNotSupported':
                alert('browser does not support html5 drag and drop')
                break;
            case 'TooManyFiles':
                // user uploaded more than 'maxfiles'
                break;
            case 'FileTooLarge':
                // program encountered a file whose size is greater than 'maxfilesize'
                // FileTooLarge also has access to the file which was too large
                // use file.name to reference the filename of the culprit file
                break;
            default:
                break;
        }
    },
    maxfiles: 25,
    maxfilesize: 20,    // max file size in MBs
    dragOver: function() {
        $('#dropzone1').addClass('active')
        // user dragging files over #dropzone
    },
    dragLeave: function() {
        $('#dropzone1').removeClass('active')
        // user dragging files out of #dropzone
    },
    docOver: function() {
        $('.dropzone').css('border','solid 3px lime');
        // user dragging files anywhere inside the browser document window
    },
    docLeave: function() {
        $('.dropzone').removeAttr('style');
        // user dragging files out of the browser document window
    },
    drop: function() {
        // user drops file
    },
    uploadStarted: function(i, file, len){
        // a file began uploading
  ...