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/dist/jquery.gridster.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

  <div class="controls">
      <button class="js-resize-random">Resize random widget</button>
  </div>

  <div class="gridster ready">
    <ul style="height: 520px; width: 550px; position: relative;">
      <li class="gs-w" data-row="1" data-col="1" data-sizex="2" data-sizey="4">
        <div id="container" style="width:100%;height:100%;margin: 0 auto"></div>
      <span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="3" data-sizex="1" data-sizey="2">1<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="4" data-sizex="1" data-sizey="1">2<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="3" data-col="2" data-sizex="3" data-sizey="1">3<span class="gs-resize-handle gs-resize-handle-both"></span></li>
      <li class="gs-w" data-row="1" data-col="5" data-sizex="1" data-sizey="3">9<span class="gs-resize-handle gs-resize-handle-both"></span></li>
    </ul>
  </div>

JavaScript

var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          helper: 'clone',
          resize: {
            enabled: true,
            stop: function(e, ui, $widget) {
              Highcharts.charts[0].reflow();
            }
          }
          
        }).data('gridster');


        $('.js-resize-random').on('click', function() {
            gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)),
                getRandomInt(1, 4), getRandomInt(1, 4))
        });

      });

    $(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});