JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo">

    <ul class="sortable">
        <li><div>Item 1</div></li>
        <li><div>Item 2</div>
            <ul class="sortable">
                <li><div>Item 2.3</div></li>
                <li><div>Item 2.4</div></li>
                <li><div>Item 2.5</div></li>
                <li><div>Item 2.6</div></li>
            
            </ul>
        </li>
        <li><div>Item 3</div></li>
        <li><div>Item 4</div></li>
        <li><div>Item 5</div></li>
        <li><div>Item 6</div></li>
        <li><div>Item 7</div></li>
    </ul>

</div><!-- End demo -->

CSS

ul.sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    ul.sortable li {height:auto;}
    ul.sortable li div {  margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 30px;}
    ul.sortable li ul.sortable {width: 100%; }
    ul.sortable li ul.sortable li {  margin: 0 5px 5px 5px; padding-left: 25px; }
   ul.sortable li ul.sortable li div {  font-size: 1.2em; height: 30px;}
    html>body .sortable li div { height: 1.5em; line-height: 1.2em; }
    .ui-state-highlight { min-height: 30px; line-height: 30px; }
li div {background: #cccccc; border: black 1px solid;

JavaScript

$(function() {
        $( ".sortable" ).sortable({
            placeholder: "ui-state-highlight",
            connectWith: ".sortable",
             helper: 'clone'
        });
        $( ".sortable" ).disableSelection();
    });