JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    Choose your favorite fruits:
</p>
<div id="dropzone" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<div id="drag1" class="fruit" draggable="true" ondragstart="drag(event)">
    Apple
</div>
<div id="drag2" class="fruit" draggable="true" ondragstart="drag(event)">
    Banana
</div>
<div id="drag3" class="fruit" draggable="true" ondragstart="drag(event)">
    Strawberry
</div>
<div id="drag4" class="fruit" draggable="true" ondragstart="drag(event)">
    Peach
</div>

CSS

#dropzone {
    width: 350px;
    height: 90px;
    padding: 10px 10px 10px 20px;
    border: 2px solid #aaaaaa;
    border-radius: 7px;
}
#dropzone.over {
    border: 2px dashed #aaaaaa;
}
div.fruit {
    width: 100px;
    background-color: #eee;
    border: 1px solid #aaaaaa;
    margin-bottom: 2px;
}

JavaScript

function dragEnter(event) {
    event.target.className = "over";
}

function dragLeave(event) {
    event.target.className = "";
}

function allowDrop(event) {
    event.preventDefault();
}

function drag(event) {
    event.dataTransfer.setData("Text", event.target.id);
}

function drop(event) {
    event.target.className = "";
    var data = event.dataTransfer.getData("Text");
    event.target.appendChild(document.getElementById(data));
    event.preventDefault();
}