JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Droppable - Shopping Cart Demo</title>
</head>
<body>
    
<ul>
    <li>Conditional</li>
    <li>Compliance</li>
    <li>Blat!</li>  
    <li>Deployment</li>
</ul>

<div>
<input type='text' id='new'/>    
</div>
    
</body>
</html>

CSS

ul { float: left; border: 1px solid red; width: 150px;height: 100px;}

div { 
    border-top: 1px solid blue; 
    border-left: 1px solid blue; 
    border-right: 1px solid blue; 
    float: left; 
    width: 300px; 
    height: auto;
    min-height:30px;
    margin-left: 50px;
}
input {
    border-bottom: 1px solid blue; 
    border-left: none; 
    border-right: 1px solid blue; 
    border-top: none;
    float: left; 
    width: 300px; 
    height: auto;
    min-height:30px;    
}
span.node { border: 1px solid black; border-radius: 2px; background-color: #ccc;margin-left: 5px;}
span.close {padding-left: 5px; color: red;cursor: pointer;}

JavaScript

// http://stackoverflow.com/questions/11734048/jquery-drag-and-drop-contacts-into-a-form-field/

$(function() {
    $( "ul > li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $("div").droppable({
        drop: function( event, ui ) {
            createNode(ui.draggable.text(), $(ui.draggable))
            //$(ui.draggable).hide();
            
        }
    });
    
    $('input').keydown(function(e){
        if (e.keyCode === 8 && this.value === '') {
            $('span.node:last > span.close').click();
        } else if (e.keyCode === 13) {
            createNode(this.value);
            this.value = '';
        }
    });
});

function createNode(text, origNode) {
   var $node = $('<span class="node"/>').html(text).append(
       $('<span class="close"/>').click(function () {
           if (origNode !== undefined) origNode.show();
           $(this).parent().remove();
       }).html('x')
   );
   $node.insertBefore($('input'));
}