JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="vb-content">
    <h1>Drag & Drop an Image</h1>
    <div id="drop-zone">
        DROP HERE
    </div>
    <div id="content">
      Your image to appear here..
    </div>
  </div>
</body>
</html>

SCSS

html {
  min-height: 100vh;
}

body {
  background: #000000;
  color: #FFFFFF;
}

.vb-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Roboto Mono', monospace;
  margin: 15px;
}

#drop-zone {
  height: 400px;
  width: 400px;
  border: 2px dotted #ebebeb;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: gray;
    border: 1px dotted #000000;
    cursor: move;
  }
}

#content {
  border: 1px solid #FFF;
  margin-top: 15px;
  padding: 10px;
}

JavaScript

const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');

const reader = new FileReader();

if (window.FileList && window.File) {
  dropZone.addEventListener('dragover', event => {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
  });
  
  dropZone.addEventListener('drop', event => {
    content.innerHTML = '';
    event.stopPropagation();
    event.preventDefault();
    const files = event.dataTransfer.files;
    console.log(files);

    reader.readAsDataURL(files[0]);
  
    reader.addEventListener('load', (event) => {
      content.innerHTML = '';
      const img = document.createElement('img');
      img.style.height = '400px';
      img.style.width = '400px';
      content.appendChild(img);
      img.src = event.target.result;
      img.alt = file.name;
    });
  }); 
}