JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Groups</h3>
<ul>
<ul class="groups">
  <span>Administrators</span>
    <li></li>
  </ul>

<ul class="groups">
  <span>Web</span>
    <li></li>
  </ul>
</ul>
<hr />

<h3>Users</h3>
<ul id="users">
    <li>Eric</li>
    <li>Richard</li>
    <li>Evan</li>
</ul>

CSS

h1 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

p {
    font-style: italic;
    padding: 1em;
}

ul {
    background: #963;
    -moz-border-radius: 1em;
    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
    padding: 1em;
    margin: 1em;
    color: #fff
}
    #users {
        background: #fff;
        color: #000;
    }

.ui-state-highlight {
    border: 2px solid #ffc;
    background: rgba(100%,100%,100%,0.25);
    height: 1em;
}

span {
    font-weight: bold;
    color: #ff0;
}

JavaScript

$('.groups').sortable({
    revert:      'invalid',
    placeholder: 'ui-state-highlight'
});

$('#users li').draggable({
    connectToSortable: '.groups',
    helper:            'clone'
});