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 id=dragme class="pin-list ui-widget-content">
  <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

$( "#dragme div" ).draggable({
  });

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