JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
<style type="text/css">
  .grid-stack { background: #FAFAD2; }
  .grid-stack-item-content { background-color: #18BC9C; }
</style>


<input type="button" onClick="onEnableResize()" value="Enable Resize" >
<input type="button" onClick="onDisableResize()" value="Disable Resize" >
<div id="myGridStack" class="grid-stack">
	<div class="grid-stack-item" data-gs-width="1" data-gs-height="1">
		<div class="grid-stack-item-content">1</div>
	</div>
	<div class="grid-stack-item" data-gs-x="1" data-gs-y="1" data-gs-width="1" data-gs-height="1">
		<div class="grid-stack-item-content">2</div>
	</div>
</div>


<script>
var gridInstance = GridStack.init({cellHeight: 70, float: true, disableOneColumn:true});
function onEnableResize() {
	gridInstance.enableResize(true, true);
}
function onDisableResize() {
	gridInstance.enableResize(false, true);
}
</script>