JSFiddle - React, Tailwind, and code Playground

HTML

<div id="droparea">

</div>

CSS

#droparea {
  height: 400px;
  background: white;
  margin: 1em;
  border: 1px solid #aaa;
}
#droparea.hover {
  background: #aff;
}

JavaScript

var dropArea = document.getElementById('droparea');

var handleDrop = function(e){
  e.stopPropagation();
  e.preventDefault();
  
  console.log(e.dataTransfer);
  console.log(e.dataTransfer.files);
};

var handleDragOver = function(event){
  event.stopPropagation();
  event.preventDefault();
  dropArea.className = 'hover';
}
dropArea.addEventListener('drop', handleDrop, false);
dropArea.addEventListener('dragover', handleDragOver, false);