JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="pin-list">
  <div>test</div>
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

<div id="drop-area">

</div>

CSS

.pin-list div {
  float: left;
  color: #fff;
  width: 50px;
  height: 50px;
  background-color: #000;
  margin-right: 10px;
}

#drop-area {
  width: 300px;
  height: 500px;
  border: 1px solid #000;
  clear: both;
  background-color: #fff;
}

JavaScript

$(document).ready(function() {
  $( ".pin-list div" ).draggable({
      helper: "clone"
  });

  $( "#drop-area" ).droppable({
      accept: ".pin-list div",
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active"
  });
});