JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/">
    <div id="file-container">
        <b>DRAG YOUR FILES HERE</b>
        <input id="file" type="file"  multiple="multiple"/>
    </div>
</form>

CSS

#file-container {
    border:2px dashed #aaa;
    background:#eee;
    position:relative;
    width:200px;
    text-align:center;
    padding:20px;
    border-radius:8px;
    font-family:sans-serif;
}

/*
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
You may change the opacity of the input to understand what is going on
*/
#file {
    position:absolute;
    opacity:0;
    background:magenta;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

JavaScript

// (Optional) prevent the dialog bug from appearing by disabling mouse click and allowing only drag and drop
$('#file').click(function(ev) {
	ev.preventDefault();
	return false;
});

$('#file').mousedown(function(ev) {
	ev.preventDefault();
	return false;
});