JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

  <body>
    <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
      <p>Drag one or more files to this <i>drop zone</i>.</p>
    </div>
  </body>

</html>

CSS

#drop_zone {
  border: 5px solid blue;
  width: 200px;
  height: 100px;
}

JavaScript

function dropHandler(ev) {
  console.log("Files dropped");

  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  console.log("Transfer types:", ev.dataTransfer.types);
  console.log("Event items:", ev.dataTransfer.items);
}

function dragOverHandler(ev) {
  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}