JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
    <div id="sortable">
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
        <div class="ui-state-default"></div>
    </div>
</div>

CSS

#sortable {
      margin: 0;
      padding: 0;
      width: 100%;
  }
  #sortable div {
      margin: 1px;
      padding: 1px;
      float: left;
      width: 32px;
      height: 32px;
  }

JavaScript

$(function () {
    $("#dialog").dialog();
    $("#sortable").sortable({
        distance: 5,
        http: //jsfiddle.net/Drath/eyKvw/#update		scroll: false,
        helper: 'clone',
        appendTo: 'body',
        zIndex: 10000,
        connectWith: '.sortable'
    });
    $("#sortable").disableSelection();
});