JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>List task</title>
    <script type="text/javascript" src="list-task.js"></script>
    <link rel="stylesheet" type="text/css" href="list-task.css">
    <script>
      document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
      ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>
</head>
<body>
    <div id="container">
        <div id="list-1">
            <div id="add-item-div">
                <input type="text" name="add-item-text" onkeypress="onEnterInInput(event);">
                <button id="add-item" onclick="add_item(event)">Add Item</button>
            </div>
            <div id="item-list">
            </div>
        </div>
        <div id="list-2">
            <div id="add-item-div-2">
                <input type="text" name="add-item-text-2" onkeypress="onEnterInInput(event);">
                <button id="add-item-2" onclick="add_item_2(event)">Add Item</button>
            </div>
            <div id="item-list-2">
            </div>
        </div>
        <div id="item-template-container" class="item-template-container" draggable="true" ondragstart="listItemDragStartHandler(event);" ondragover="dragoverHandler(event);" ondragend="dragEndHandler(event);" ondragleave="dragLeaveHandler(event);" ondrop="onDropHandler(event);">
            <div class="item-list-element">
                <div class="item-text"></div>
                <div class="delete-item-div">
                    <button class="delete-item" onclick="delete_item(event);">Delete</button>
                </div>
            </div>
        </div>
        <div id="empty-node">&nbsp;</div>
    </div>
</body>
</html>

CSS

body {
    font-size: 18px;
}

input {
    font-size: 18px;
}

button {
    /*font-size: 14px;*/
    margin: 2px;
}

#container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#item-template-container {
    display: none
}

#list-1 {
    display: inline-block;
}

#list-2 {
    display: inline-block;
    vertical-align: top;
}

#add-item-div, #add-item-div-2 {
    background-color: orange;
    margin-bottom: 5px;
    width: 18em;
    text-align: center;
}

#add-item, #add-item-2 {
    margin: 10px;
}

#item-list, #item-list-2 {
    display: block;
    width: 13em;
}

.item-list-element {
    background-color: lightgreen;
    margin: 5px;
    text-align: center;
}

.item-list-element:hover {
    cursor: pointer;
}

.item-list-element .item-text {
    display: inline-block;
    width: 8em;
    overflow-wrap: break-word;
}
.item-list-element .delete-item-div {
    display: inline-block;
    float: right;
}

#grayed-empty-node {
    background-color: gray;
    width: 13em;
    opacity: 0;
}

#grayed-empty-node.fade-in {
    -webkit-animation: fade 0.9s;
    animation: fade 0.9s;
    opacity: 1;
}

@-webkit-keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}@keyframes fade {
    from {opacity: 0}
    to {opacity: 1}
}

#empty-node {
    display: none;
}

JavaScript

'use strict';

var source = null;
var heightWidth = null;
var lastDragOverElementId = null;
var dragImageSource = null;

function listItemDragStartHandler(event) {
    source = event.currentTarget;
    heightWidth = [];
    heightWidth.push(source.offsetHeight);
    heightWidth.push(source.offsetWidth);
    event.dataTransfer.setData('text/html', event.currentTarget.innerHTML);
    event.dataTransfer.effectAllowed = 'move';
    // Drag image logic
    dragImageSource = source.cloneNode(true);
    dragImageSource.style.position = 'absolute';
    // Don't show the element
    dragImageSource.style.top = '0px';
    dragImageSource.style.left = '-' + String(window.innerWidth) + 'px';
    // dragImageSource.style.left = '-100px';
    var toTiltElement = dragImageSource.getElementsByClassName('item-list-element')[0];
    toTiltElement.style.transform = 'rotate(5deg)';
    document.body.append(dragImageSource);
    event.dataTransfer.setDragImage(dragImageSource, heightWidth[1]/2, heightWidth[0]/2);
}

function dragoverHandler(event) {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
    source.style.display = 'none';
    var currentElement = event.currentTarget;
    var listContainer = currentElement.parentNode;
    if (lastDragOverElementId != currentElement.getAttribute('id')) {
        lastDragOverElementId = currentElement.getAttribute('id');
        if(document.getElementById('grayed-empty-node') !== null) {
            if(currentElement.getAttribute('id') !== 'grayed-empty-node') {
                document.getElementById('grayed-empty-node').remove();
            }
        }
        var isGrayEmptyNodeThere = document.getElementById('grayed-empty-node');   //
        if(isGrayEmptyNodeThere === null) {
            var emptyNode = document.getElementById('empty-node').cloneNode(true);
            emptyNode.removeAttribute('id');
            emptyNode.setAttribute('id', 'grayed-empty-node');
            emptyNode.setAttribute('class',...