JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
 
<html lang="en">
<head>
    <title>Basic drag and drop example</title>
    
    <style>
    @CHARSET "UTF-8";
table.draggable-word {
    background-color: red;
    padding: 0px;
    border: 1px solid green;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 100%;
    height:50px;
}

.drop-div {
    width: 150px;
    height: 150px;
    border: 3px solid #224163;
    background-color: #AABACC;
    margin-top: 15px;
    text-align: center;
    overflow: auto;
}

[draggable=true] {
    cursor: default;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

table {
     border-color: #600;
    border-width: 0 0 1px 1px;
    border-style: solid;
}
    </style>
    
    
    <script>
        
var user ="";
var multiples = false;
var data;

function dragStartHandler(event,id) {
    event.dataTransfer.setData('Object', event.target.id);
    user = id;
    multiples = true;
     data = event.dataTransfer.getData('Object');
    //multipleDrag(data,"false");

}
function dropHandler(event) {
    preventDefaults(event);
    if (!event.target) {
        alert('we');
        event.target = event.srcElement
    }
    data = event.dataTransfer.getData('Object');
    event.target.appendChild(document.getElementById(data));
    document.getElementById(data).selectedIndex = -1;
    //alert(user);
    


}
function dragOverHandler(event) {
    preventDefaults(event);
}

function preventDefaults(event) {
    if (event.preventDefault) {
        event.preventDefault();
    }

    try {
        event.returnValue = false;
    }
    catch (exception) {}
}


function dragend(event) {
//    multipleDrag(data,"true");

}

function multipleDrag(data,state){
    document.getElementById(data).setAttribute("draggable",...