JSFiddle - React, Tailwind, and code Playground

by Drath

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();
    $("#sortable").disableSelection();
});