JSFiddle - React, Tailwind, and code Playground

by mdineshkumarcs

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
 <div id="a" class="split split-horizontal">
      <div id="c" class="split content"></div>
      <div id="d" class="split content"></div>
    </div>
    <div id="b" class="split split-horizontal">
      <div id="e" class="split content"></div>
      <div id="f" class="split content"></div>
    </div>

CSS

html, body {
    height: 100%;
  }
  body {
    padding: 8px;
    background-color: #F6F6F6;
    box-sizing: border-box;
  }
  .split {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .content {
    border: 1px solid #C0C0C0;
    box-shadow: inset 0 1px 2px #e4e4e4;
    background-color: #fff;
  }
  .gutter {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 50%;
  }
  .gutter.gutter-horizontal {
    cursor: col-resize;
    background-image: url('../grips/vertical.png');
  }
  .gutter.gutter-vertical {
    cursor: row-resize;
    background-image: url('../grips/horizontal.png');
  }
  .split.split-horizontal, .gutter.gutter-horizontal {
    height: 100%;
    float: left;
  }

JavaScript

"use strict";(function(){var e=this,t="addEventListener",i="removeEventListener",s="getBoundingClientRect",n=e.attachEvent&&!e[t],r=e.document,o=function(){var e,t=["","-webkit-","-moz-","-o-"];for(var i=0;i<t.length;i++){e=r.createElement("div");e.style.cssText="width:"+t[i]+"calc(9px)";if(e.style.length){return t[i]+"calc"}}}(),a=function(e){if(typeof e==="string"||e instanceof String){return r.querySelector(e)}else{return e}},l=function(l,u){var c,f,p,g,h,d,z,S,y=[];u=typeof u!=="undefined"?u:{};if(typeof u.gutterSize==="undefined")u.gutterSize=10;if(typeof u.minSize==="undefined")u.minSize=100;if(typeof u.snapOffset==="undefined")u.snapOffset=30;if(typeof u.direction==="undefined")u.direction="horizontal";if(u.direction=="horizontal"){c="width";p="clientWidth";g="clientX";h="left";d="gutter gutter-horizontal";z="paddingLeft";S="paddingRight";if(!u.cursor)u.cursor="ew-resize"}else if(u.direction=="vertical"){c="height";p="clientHeight";g="clientY";h="top";d="gutter gutter-vertical";z="paddingTop";S="paddingBottom";if(!u.cursor)u.cursor="ns-resize"}var v=function(i){var s=this,n=s.a,r=s.b;if(!s.dragging&&u.onDragStart){u.onDragStart()}i.preventDefault();s.dragging=true;s.move=b.bind(s);s.stop=m.bind(s);e[t]("mouseup",s.stop);e[t]("touchend",s.stop);e[t]("touchcancel",s.stop);s.parent[t]("mousemove",s.move);s.parent[t]("touchmove",s.move);n[t]("selectstart",U);n[t]("dragstart",U);r[t]("selectstart",U);r[t]("dragstart",U);n.style.userSelect="none";n.style.webkitUserSelect="none";n.style.MozUserSelect="none";n.style.pointerEvents="none";r.style.userSelect="none";r.style.webkitUserSelect="none";r.style.MozUserSelect="none";r.style.pointerEvents="none";s.gutter.style.cursor=u.cursor;s.parent.style.cursor=u.cursor;M.call(s)},m=function(){var t=this,s=t.a,n=t.b;if(t.dragging&&u.onDragEnd){u.onDragEnd()}t.dragging=false;e[i]("mouseup",t.stop);e[i]("touchend",t.stop);e[i]("touchcancel",t.stop);t.parent[i]("mousemove",t.move);t.parent[i]("touchmove",t.move);delete...