JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <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;
  position: relative;
}

#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"
  });

  var $widgets = $("#widget1, #widget2, #widget3, #widget4, #widget5, #widget6, #widget7, #widget8, #widget9, #widget10, #widget11, #widget12");

  $widgets.click(function() {
    $('#builder').append($(this).clone().removeAttr('id').css({
    	position: 'absolute',
      top: 0,
      left: 0
    }).draggable({
      containment: "#builder",
      scroll: false
    }));
  })

  $widgets.draggable({
    appendTo: "body",
    helper: "clone"
  });

  $("#builder").droppable({
    drop: function(event, ui) {
      if (ui.draggable[0].id) {
        $('#builder').append($(ui.helper).clone().removeAttr('id').draggable({
          containment: "#builder",
          scroll: false
        }));
      }
    }
  });

  $("#trashWidget").droppable({
    greedy: 'true',
    accept: function() {
      return true;
    },
    drop: function(event, ui) {
      tolerance: 'fit',
      $(ui.draggable).remove();
    }
  });
});