JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<script src="http://gridster.net/demos/assets/jquery.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<div class="container">
<div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
      <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
      <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
      <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
      <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
      <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
      <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
      <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
    </ul>
  </div>
</div>

CSS

.container{
    
    height:1600px;
}

JavaScript

var gridster;

      $(function(){
        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          draggable: {
            start: function(e, ui, $widget) {
              
            },

            drag: function(e, ui, $widget) {

            },

            stop: function(e, ui, $widget) {
            }
          }
        }).data('gridster');


      });