JSFiddle - React, Tailwind, and code Playground

by Suganya Rajasekar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div id="tabs-container">
  <ul class="tabs dashboard-tabs" data-tabs id="example-tabs" data-deep-link="true" data-update-history="true" data-match-height="false">
    <li class="tabs-title is-active">
      <a href="#panel1" aria-selected="true">Tab 1</a>
    </li>
    <li class="tabs-title">
      <a href="#panel2">Tab 2</a>
    </li>
  </ul>

  <div class="tabs-content unstyled" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="panel1">
      <div class="grid-stack">
        <div class="grid-stack-item" data-custom-id="panel1-item1" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
          <div class="grid-stack-item-content">#1</div>
        </div>
        <div class="grid-stack-item" data-custom-id="panel1-item2" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="2">
          <div class="grid-stack-item-content">#2</div>
        </div>
        <div class="grid-stack-item" data-custom-id="panel1-item3" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="2">
          <div...

CSS

.grid-stack>.grid-stack-item>.grid-stack-item-content {
    background-color: #fff;
    cursor: move;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 1rem;
  }

JavaScript

// Initialize zurb foundation
$(document).foundation();

$(function() {
  var grid = $('.grid-stack').data('gridstack');

  var options = {
    height: 6,
    verticalMargin: 28,
    animate: true,
  };

  // Initialize grid-stack widgets
  widgetsInit = function(options) {
    $('.grid-stack').gridstack(options);
    getWidgetData(); // Find and set positions from local storage
  }

  updateVisibleWidgetHeights = function(options) {
    var targetPanel = '.tabs-panel.is-active';

    $(targetPanel + ' .grid-stack .grid-stack-item').each(function(i) {
      $(targetPanel + ' .grid-stack').data('gridstack').resize(
        $(targetPanel + ' .grid-stack .grid-stack-item')[i],
        $($(targetPanel + ' .grid-stack .grid-stack-item')[i]).attr('data-gs-width'),
        Math.ceil(($(targetPanel +
            ' .grid-stack .grid-stack-item .grid-stack-item-content')[i].scrollHeight +
          $(targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin
        ) / ($(targetPanel + ' .grid-stack').data('gridstack').cellHeight() + $(
          targetPanel + ' .grid-stack').data('gridstack').opts.verticalMargin))
      );
    });
  }

  updateAllWidgetHeights = function(options) {
    $('.grid-stack .grid-stack-item').each(function(i) {
      $('.grid-stack').data('gridstack').resize(
        $('.grid-stack .grid-stack-item')[i],
        $($('.grid-stack .grid-stack-item')[i]).attr('data-gs-width'),
        Math.ceil(($('.grid-stack .grid-stack-item .grid-stack-item-content')[i].scrollHeight +
          $('.grid-stack').data('gridstack').opts.verticalMargin) / ($(
            '.grid-stack').data('gridstack').cellHeight() + $('.grid-stack')
          .data('gridstack').opts.verticalMargin))
      );
    });
  }

  getWidgetData = function() {

    // // Load from local storage
    var serialization = null;
    let tabs = $('#tabs-container >ul >li');
    let totalTabs = $('#tabs-container >ul >li').length;

    if (localStorage.getItem("grid-layout") !== null)...