JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="demo">
    <ul class="sortable">
      <li class="draggable ui-state-highlight">Arrastrame fuera</li>
    </ul>
    
    <ul class="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Arrastrame fuera</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
</div>

CSS

.demo{
  width:300px;
  height:300px;
  border: 1px solid red;
}
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-top:50px; }
.demo li { margin: 0px; padding: 5px; width: 150px; }

JavaScript

$(".sortable").sortable({
  //revert: true
  containment: '.demo',
});

$(".draggable").draggable({
  containment: '.demo',
  connectToSortable: '.sortable',
  //revert: 'valid'
});