JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 488px; }
#sortable li { margin: 10px; padding: 0px; float: center; width: 100px; height: 75px; font-size: 1em; font-color: white; text-align: center; border: solid 0px #000; background-color: grey; }

JavaScript

$( "#sortable" ).sortable({       
    start: function(e, ui){
        $(ui.placeholder).hide('fast');
    },
    change: function (e,ui){
        $(ui.placeholder).hide().show('fast');
    }
});                           
$("#sortable").disableSelection();