JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="sortable">
    <div class="item">Item 1A</div>
    <div class="item">Item 2A</div>
    <div class="item">Item 3A</div>
    <div class="item">
        <div class="category">
            <div class="item">Item 1B (try to move Item 1A above me)</div>
            <div class="item">Item 2B (try to move item 1A under me)</div>
        </div>
    </div>
</div>

CSS

.category {
    background-color: lightblue;
    padding: 10px;
    margin-left: 20px;
}
.item {
    background-color: lightgray;
    margin: 5px;
    padding: 5px;
}

.placeholder {
    height: 20px;
    background-color: yellow;
}

JavaScript

$("#sortable").sortable({
    items: ".item",
    placeholder: "placeholder"
});
$("#sortable").disableSelection();