JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<div id="dialog">
    <div id="sortable" class="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>
</div>

<div id="dialog2">
    <div id="sortable2" class="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>
</div>

CSS

.ui-state-default {
      margin: 1px;
      padding: 1px;
      float: left;
      width: 32px;
      height: 32px;
  }

JavaScript

$(function () {
    $("#dialog").dialog({
        position: [10, 10]
    });
    $("#sortable").sortable({
        scroll: false,
        helper: 'clone',
        appendTo: 'body',
        zIndex: 10000,
        connectWith: '.sortable',
    });
    $("#sortable").disableSelection();
    
    $("#dialog2").dialog({
        position: [100, 100]
    });
    $("#sortable2").sortable({
        scroll: false,
        helper: 'clone',
        appendTo: 'body',
        zIndex: 10000,
        connectWith: '.sortable',
    });
    $("#sortable2").disableSelection();
});