JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card mb-3 ui-widget resizable" style="visability:hidden;">
        <div class="card-header bg-transparent">Assigned To</div>
        <div class="card-body">
          <h5 class="card-title">Success card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer bg-transparent">Footer</div>
      </div>
    </div>
    <div class="col">
      <div class="card mb-3 ui-widget resizable">
        <div class="card-header bg-transparent">Defects by Users</div>
        <div class="card-body">
          <h5 class="card-title">Success card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer bg-transparent">Footer</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="card mb-3 ui-widget resizable">
        <div class="card-header bg-transparent">Header</div>
        <div...

CSS

.row {
  background: #f8f9fa;
}
.ui-widget {
}
.resizable {
}
body {
  position:relative;
  background:#efefef;
}
.overlay {
  background:black;
  opacity:.9;
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:999999;
}

JavaScript

var $m = 10,
    $offsetTop = 0,
    $widgets = $('.ui-widget'),
    $getWindowHeight = function() {
      $h = $(window).height() - $offsetTop;
      //console.log('h '+ $h);

      return $h;
    },
    $getWindowWidth = function() {
      $w = $(window).height();
      //console.log('w '+ $w);

      return $w;
    },
    $setWidgetHeights = function() {
      var $visableRows = null;

      if ($getWindowHeight() <= 500) {
        var $visableRows = 1;
      } else if ($getWindowHeight() <= 1000) {
        var $visableRows = 2;
      } else if ($getWindowHeight() <= 1500) {
        var $visableRows = 3;
      } else if ($getWindowHeight() <= 2000) {
        var $visableRows = 4;
      };

      var $widgetHeight = (($getWindowHeight() / $visableRows) - ($m * 2)) - 2;     

      $widgets.css({
        'margin-bottom' : $m,
        'margin-top' : $m,
        'min-height' : $widgetHeight,
      });
    };

$( ".resizable" ).resizable({
  start: function( event, ui ) {
    console.log('start resize');
    $('.overlay').show();
  },
  stop: function( event, ui ) {
    console.log('stop resize');
    $('.overlay').hide();
  },
  alsoResize: '.x'
});

$(window).on('resize', function(){
   $getWindowHeight();
   $getWindowWidth();
   $setWidgetHeights()
});

$(document).ready(function(){
  $getWindowHeight();
  $getWindowWidth();
  $setWidgetHeights()
});