JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="empty">
            <div class="fill" draggable="true"> </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="empty">
          </div>
        </div>
      </div>
    </div>

CSS

.fill {
  background-image: url('https://source.unsplash.com/random/150x150');
  height: 150px;
  width: 150px;
  cursor: pointer;
}

.hold {
  border: solid 5px #ccc;
}

.empty {
  height: 56rem;
    width: 36rem;
    margin: 10px;
    border: solid 3px salmon;
    background: white;
  }


.hovered {
  background: #f4f4f4;
  border-style: dashed;
}

JavaScript

const fill = document.querySelector('.fill');
    const empties = document.querySelectorAll('.empty');


    // Fill listeners
    fill.addEventListener('dragstart', dragStart);
    fill.addEventListener('dragend', dragEnd);

    // Loop through empty boxes and add listeners
    for (const empty of empties) {
    empty.addEventListener('dragover', dragOver);
    empty.addEventListener('dragenter', dragEnter);
    empty.addEventListener('dragleave', dragLeave);
    empty.addEventListener('drop', dragDrop);
    }

    // Drag Functions

    function dragStart() {
    this.className += ' hold';
    setTimeout(() => (this.className = 'invisible'), 0);
    }

    function dragEnd() {
    this.className = 'fill';
    }

    function dragOver(e) {
    e.preventDefault();
    }

    function dragEnter(e) {
    e.preventDefault();
    this.className += ' hovered';
    }

    function dragLeave() {
    this.className = 'empty';
    }

    function dragDrop() {
    this.className = 'empty';
    this.append(fill);
    }