JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div id=leftDiv class=unselectable>LEFT</div>
<div id=leftsplitter class=verticalsplitter></div>
<div id=content class=unselectable>Content</div>
<div id=rightsplitter class=verticalsplitter></div>
<div id=rightDiv class=unselectable>RIGHT</div>
<div id=topDiv class=unselectable>TOP</div>
<div id=topsplitter class=horizontalsplitter></div>
<div id=bottomDiv class=unselectable>BOTTOM</div>
<div id=bottomsplitter class=horizontalsplitter></div>

CSS

html, body {
    margin:0;
    height:100%;
    padding: 0px;
    background-color: gray;
    bottom: 0;
}
#leftDiv {
    right: 80%;
    left: 0;
    top: 100px;
    bottom:100px;
    background-color: lightblue;
    position:absolute;
}
#content {
    left: 20%;
    right: 20%;
    top:100px;
    bottom: 100px;
    background-color: wheat;
    position:absolute;
}
#rightDiv {
    top:100px;
    right: 0px;
    left:80%;
    bottom:100px;
    background-color: lightgray;
    position:absolute;
}
#topDiv {
    width:100%;
    top: 0;
    left: 0;
    right: 20%;
    background-color: coral;
    height:100px;
    position:absolute;
}
#bottomDiv {
    right: 0;
    background-color: lightgreen;
    position:absolute;
    bottom: 0;
    left: 0;
    top: calc(100% - 100px)
}
.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.verticalsplitter {
    width: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}

.horizontalsplitter {
    height: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}

JavaScript

var Splitter = function (opts) {

    var bounds,
    clicked,
    options = opts || {},
    expandLocation = null,
        dummySplitter = null;

    options.orientation = opts.orientation || 'vertical';
    options.collapse = opts.collapse || 'left';
    options.dummySplitter = opts.dummySplitter || false;

    /*
     * Event Handlers
     * */
    var mouseOverHandler = function () {
        if (options.orientation === 'horizontal') {
            options.splitter.style.cursor = 'row-resize';
        } else {
            options.splitter.style.cursor = 'col-resize';
        }
    };

    var mouseDownHandler = function () {
        if (options.orientation === 'horizontal') {
            document.body.style.cursor = 'row-resize';
        } else {
            document.body.style.cursor = 'col-resize';
        }

        clicked = true;
    };

    var mouseUpHandler = function (e) {
        if (clicked) {
            clicked = false;
            document.body.style.cursor = '';

            if (dummySplitter != null) {
                dummySplitter.removeEventListener('mousemove', mouseMoveHandler);
                dummySplitter.remove();
                dummySplitter = null;

                if (options.orientation === 'horizontal') {
                    options.elementOne.style.bottom = (window.innerHeight - e.y) + "px";
                    options.elementTwo.style.top = options.splitter.style.top = window.innerHeight - (window.innerHeight - e.y) + "px";
                } else {
                    options.elementOne.style.right = (window.innerWidth - e.x) + "px";
                    options.elementTwo.style.left = options.splitter.style.left = window.innerWidth - (window.innerWidth - e.x) + "px";
                }
            }
        }
    };

    var mouseMoveHandler = function (e) {

        if (clicked) {
            expandLocation = null;

            if (options.elementTwo.parentNode == null) {
               ...