JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tools_container">
         <h3>Items: -</h3>
         <ul>
             
             <li>File upload<br />
                 <img id="file" class="draggable" src="admin_images/file.jpg" alt="file" /><br />
             </li>
             
         </ul>
     </div>
     <div class="form_container">
         <h1>Form Title</h1>
         <div class="form_builder">
             
         </div>
     </div>

CSS

body{
    font-family:arial;
    font-size:12px;
}

h1{
    font-size:18px;
}

h3{
    font-size:14px;
}

.tools_container{
    padding:40px 10px 0 10px;
    width:200px;
    float:left;
    border-right:1px solid #000;
}

.tools_container ul{
    margin-top:15px;
}

.tools_container li{
    margin-top:5px;
}


.form_container{
    float:left;
    padding:20px 10px 10px 15px;
}

.draggable:hover{
    cursor:pointer;
}

.form_builder{
    width:250px;
    height:700px;
}

.form_builder.droppable_dragged{
    border:1px solid red;
}

JavaScript

$(document).ready(function(){
    $(".draggable").draggable({
        opacity:0.5,
        helper: "clone"
    });
    
     $(".form_builder").droppable(
         {
                 activeClass: "droppable_dragged",
                 drop: function(e, ui){
                     var itemToAdd;
                     
                     var dropped_item = ui.draggable;
                    
                     var $input = $("<input>",{
                         type: $(dropped_item).attr("id")                         
                     }).wrap("<div>").parent().css("padding","20px").appendTo(this).draggable();
                }
                 
            });
});