JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<div class="container">
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>  
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>
     <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>  
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>
     <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div> 
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Skull-Icon.svg"></img></div>
    <div><img...

CSS

.container {
    border: 1px solid #ccc;
    position: relative;
	display: block;
	overflow-y: scroll;
	overflow-x: hide;
	height: 100%;
}

.container > div {
    background: #CCC;
    height: 77px;
    position: absolute;
    width: 77px;
}

.container > div[data-ss-colspan='2'] { width: 164px; }

.container > div[data-ss-colspan='3'] { width: 246px; }

.container .ss-placeholder-child {
    background: transparent;
    border: 1px dashed red;
}

img{
	max-width:100%; 
	max-height:100%;
	width: auto;
	height: auto;
	
	-webkit-object-fit: contain;
	-moz-object-fit: contain;
	-o-object-fit: contain;
	-object-fit: contain;
}

JavaScript

(function(){(function(e,c,a){var b,f,d;d="shapeshift";f={selector:"*",enableDrag:true,enableCrossDrop:true,enableResize:true,enableTrash:false,align:"center",colWidth:null,columns:null,minColumns:1,autoHeight:true,maxHeight:null,minHeight:100,gutterX:10,gutterY:10,paddingX:10,paddingY:10,animated:true,animateOnInit:false,animationSpeed:225,animationThreshold:100,dragClone:false,deleteClone:true,dragRate:100,dragWhitelist:"*",crossDropWhitelist:"*",cutoffStart:null,cutoffEnd:null,handle:false,cloneClass:"ss-cloned-child",activeClass:"ss-active-child",draggedClass:"ss-dragged-child",placeholderClass:"ss-placeholder-child",originalContainerClass:"ss-original-container",currentContainerClass:"ss-current-container",previousContainerClass:"ss-previous-container"};b=(function(){function g(i,h){this.element=i;this.options=e.extend({},f,h);this.globals={};this.$container=e(i);if(this.errorCheck()){this.init()}}g.prototype.errorCheck=function(){var h,j,k,i;i=this.options;k=false;j="Shapeshift ERROR:";if(i.colWidth===null){h=this.$container.children(i.selector);if(h.length===0){k=true;console.error(""+j+" option colWidth must be specified if Shapeshift is initialized with no active children.")}}return !k};g.prototype.init=function(){this.createEvents();this.setGlobals();this.setIdentifier();this.setActiveChildren();this.enableFeatures();this.gridInit();this.render();return this.afterInit()};g.prototype.createEvents=function(){var i,h,j=this;h=this.options;i=this.$container;i.off("ss-arrange").on("ss-arrange",function(l,k){if(k==null){k=false}return j.render(false,k)});i.off("ss-rearrange").on("ss-rearrange",function(){return j.render(true)});i.off("ss-setTargetPosition").on("ss-setTargetPosition",function(){return j.setTargetPosition()});i.off("ss-destroy").on("ss-destroy",function(){return j.destroy()});return i.off("ss-shuffle").on("ss-shuffle",function(){return j.shuffle()})};g.prototype.setGlobals=function(){this.globals.animated=this.options.animateOnInit;return...