JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>First Item</li>
    <li class="droppable">Drop here</li>
    <li>Another item</li> 
    <li>First Item</li>
    <li class="droppable">Drop here</li>
    <li>Another item</li> 
</ul>

CSS

ul {
    padding: 10px;
}

li {
    padding: 5px;
}

.drop-hover {
    background: yellow;
}

JavaScript

$('ul').sortable({
    axis: 'y',
    helper: 'clone',
    forcePlaceholderSize: true,
    opacity: 0.5,
});

$('.droppable').droppable({
    hoverClass: 'drop-hover',
    accept: 'li',
    tolerance: 'pointer'
});