JSFiddle - React, Tailwind, and code Playground

by stackmanoz

HTML

<ul id="selection">
  <li>Telephone Number</li>
  <li>Address</li>
</ul>
<ul id="drop">
</ul>

CSS

ul {
    list-style-type: none;
    min-height: 100px;
    margin: 0 20px;
    padding: 20px;
    float: left;
}

#selection { 
  border: 1px solid black; 
  background-color: #D3D3D3;
  text-align:center;
}

#drop { 
  border: 1px solid black; 
  text-align: center;
}

li {
  border: 2px solid black;
  background-color: #0EBFE9;
  margin: 5px;
  padding: 2px;
}

:focus {
  border: 3px solid black;
  border-style:dotted dashed;
}

#drop :hover {
  background-color: #C0C0C0;
}

JavaScript

$(document).ready(function () {
    $('#drop').sortable({connectWith: $('#selection')});
    $('#selection').sortable({connectWith: $('#drop')});
});