JSFiddle - React, Tailwind, and code Playground

HTML

<div><!-- Start Main Page Content -->

            <!-- START JQUERY -->
            <div style="width:750px; display: block;">
                
                <div id="products" style="width:200px; float:left;">
                    <span style="color:#D8781A;">WIDGET SELECTOR</span>
                <div id="catalog" align="left" style="padding:20px 0px 0px 0px; border: 1px dotted rgb(204, 204, 204);">
                        <div>
                            <ul style="list-style:none;">
                                <div id="widget1" style="border: 1px dotted rgb(204, 204, 204); width:50px; height: 50px; background-color:#eae9e4;"></div>WIDGET 1
                                <div id="widget2" style="border: 1px dotted rgb(204, 204, 204); width:100px; height:100px; background-color:#eae9e4;"></div>WIDGET 2
                                <div id="widget3" style="border: 1px dotted rgb(204, 204, 204); width:75px; height:75px; background-color:#eae9e4;"></div>WIDGET 3
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div style="padding:0px 0px 0px 0px; float:left;"><br /></div>
                    <span style="color:#D8781A;">WIDGET BUILDER</span><br />
                <div id="builder" style="padding:0px 0px 0px 0px; float:left; border: 1px dotted rgb(204, 204, 204); width:500px; height:400px;">
                    <div>
        
                            
                        <div id="trashWidget" style="width:46px; height:46px; float:right; padding:0px 0px 0px 0px; border: 1px dotted rgb(204, 204, 204);">trash</div>
                    </div>
                </div>


            </div>
            <!-- END JQUERY -->
            
        </div><!-- End Main Page Content -->

CSS

#widget { width: 100px; height: 100px; padding: 0; float: left; margin: 0px 0px 0px 0px; }
            #builder { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; float:left; }
            #trashWidget { padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; }
            a { color: 0076A3; text-decoration: none; outline: none; font: normal 11px/13px Verdana, Helvetica, sans-serif; }
            a:active {color:#0076A3;text-decoration:underline;}
            a:visited {color:#0076A3;text-decoration:none;}
            a:hover {color:#0076A3;text-decoration:underline;}
            span { font: normal 11px/13px Verdana, Helvetica, sans-serif;}
            div { font: normal 11px/13px Verdana, Helvetica, sans-serif;}

JavaScript

$(function() {
            $( "#catalog li" ).draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid", // when not dropped, the item will revert back to its initial position
            });
            $( "#widget1,#widget2,#widget3,#widget4,#widget5,#widget6,#widget7,#widget8,#widget9,#widget10,#widget11,#widget12" ).draggable({    appendTo: "body", helper: "clone"});
            $( "#builder" ).droppable({
                drop: function(event, ui) {
                    if (ui.draggable[0].id) {
                        $(this).append($(ui.helper).clone().draggable({ containment: "#builder", scroll: false }));
                        <!--   ONLY DRAG HORIZONTALLY   $(this).append($(ui.helper).clone().draggable({ containment: "#demo", scroll: false, axis: "x" })); -->
                    }
                }
            });
            $("#trashWidget").droppable({
                greedy: 'true',
                accept: function() { return true; },
                drop: function (event, ui) { tolerance: 'fit', $(ui.draggable).remove(); }
            });

        });