JSFiddle - React, Tailwind, and code Playground

HTML

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

    </ul>
</div>

JavaScript

var gridster;

    $(function(){

      gridster = $(".gridster > ul").gridster({
          widget_margins: [2.5, 2.5],
          widget_base_dimensions: [100, 100]
      }).data('gridster');



    });