JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filebox">
</div>

CSS

#filebox {
    width: 400px;
    overflow: auto;
    font-family: Helvetica, Arial, sans-serif;
}

#fileBar {
    height: 32px;
    background-color: grey;
    line-height: 32px;
    padding-left: 5px;
    color: #eee;
}

#files {
    background-image:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(25%, rgb(255,255,255)),
        color-stop(1, rgb(220,220,220))
    );

    background-image:-moz-linear-gradient(
        center bottom,
        rgb(255,255,255) 25%,
        rgb(220,220,220) 100%
    );

    outline:none;
    border:solid 1px #ddd;
    min-height: 230px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
}

#files .file {
    float: left;
    margin-top: 10px;
    height: 98px;
    width: 98px;
    margin-left: 25px;
    border: 1px solid #999;
    position: relative;
}
#files .overlay {
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    position: absolute;
    z-index:99;
    top: 0px;
    left: 0px;
    display: none;
}

#files .delete {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 12px;
    height: 12px;
    padding: 0 0 5px 5px;
    background-color: #aaa;
    border: 1px solid #ddd;
    text-decoration: none;
    color: darkRed;
    font-weight: bold;
}
#files .name, #files .data {
    overflow: hidden;
    word-wrap: break-word;
}
#files .data {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: center;
}

#files img {
    max-width: 98px;
    max-height: 98px;
    margin: 0 auto;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    overflow: hidden;
    }
    
    #filebox .btn {
    border-radius: 6px;
    border: 1px solid #aaa;
    background: #eeeeee; /* old browsers */
    background: -moz-linear-gradient(top, #fff 0%, #ccc 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff),...

JavaScript

var fileBox, fileBar, files, fileList=[],replace=[];

function init() {
    fileBox = $('#filebox');
    fileBar = $(document.createElement("div")).attr('id', "fileBar").html("Images");
        
    files = $(document.createElement("div")).attr('id', 'files').addClass('clearfix');

    fileBox.append(fileBar.append(
        $(document.createElement("a")).addClass('btn').html('upload').click(uploadAll).attr('href',"#")
    )).append(files);
    
    fileBox.mouseover(function (e) {
        //menuBar.stop().animate({marginTop:0},400);
    });
    
    fileBox.mouseout(function(e) {
        //menuBar.stop().animate({marginTop:-33},400);
    });
    
    fileBox[0].addEventListener("dragenter", function(e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);
    
    fileBox[0].addEventListener("dragover", function(e) {
        e.preventDefault();
        e.stopPropagation();
    }, false);
    
    fileBox[0].addEventListener("drop", function(e) {
        e.preventDefault();
        e.stopPropagation();
        var dt = e.dataTransfer;
        var fs = dt.files;
        //console.log(files);
        handleFiles(fs);
    }, false);
}

function has(file) {
    for(var i=0;i<fileList.length;i++) {
        if(fileList[i].name==file.name && fileList[i].size==file.size)
            return i;
    }
    return -1;
}

function handleFiles(fs) {
    for(var i=0;i<fs.length;i++) {
        if(!fs[i].type.match(/image\/*/) || has(fs[i])>-1) {
           continue;
           }
        fileList[fileList.length]=fs[i];
        var img=document.createElement("img");
        var reader = new FileReader();
        reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result;fix();}})(img);
        reader.readAsDataURL(fs[i]);
        files.append(
            $(document.createElement("div")).addClass("file").append(
                $(img)//.css('margin-top',(100-$(img).attr('height'))/2)
            ).append(
               ...