JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropzone">
    <div>dropzone</div>
    <input type="file" />
</div>

CSS

#dropzone {
    position: relative;
    border: 5px dotted #000;
    border-radius: 10px;
    color: #000;
    font: bold 24px/200px arial;
    height: 200px;
    margin: 30px auto;
    text-align: center;
    width: 200px;
}

#dropzone.hover {
    border: 4px solid green;
    color: green;
}

#dropzone.dropped {
    background: #222;
    border: 5px solid #444;
}

#dropzone div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#dropzone img {
    border-radius: 5px;
    vertical-align: middle;
    max-width: 95%;
    max-height: 95%;
}

#dropzone [type="file"] {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

JavaScript

var dropzone = $("#dropzone"),
	input    = dropzone.find('input');

dropzone.on({
	dragenter : dragin,
	dragleave : dragout
});

input.on('change', drop);

function dragin(e) { //function for drag into element, just turns the bix X white
    $(dropzone).addClass('hover');
}

function dragout(e) { //function for dragging out of element                         
    $(dropzone).removeClass('hover');
}

function drop(e) {
    var file = this.files[0];

    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();
    
    // upload file here
    showfile(file); // showing file for demonstration ... 
}

function showfile(file) {
	var reader = new FileReader(file);
    reader.readAsDataURL(file);

    reader.onload = function(e) {
        $('#dropzone div').html($('<img />').attr('src', e.target.result).fadeIn());
    }
}