JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    <div id="sortable" class="ui-state-default">
        <div id = "draggable1" class="ui-state-default"><p>Home</p></div>
        <div id = "draggable2" class="ui-state-default"><p>Contact Us</p></div>
        <div id = "draggable3" class="ui-state-default"><p>FAQs</p></div>
    </div>
</div>

CSS

#draggable1 { background:#ff0000; width: 150px; height: 35px;}
#draggable2 { background:#00ff00; width: 150px; height: 35px;}
#draggable3 { background:#0000ff; width: 150px; height: 35px;}

#sortable { width: 700px; height: 35px;  }

#sortable > div { float: left; }
p { padding: 0.5em; }

JavaScript

$("#sortable").sortable({
            revert: true
        });