JSFiddle - React, Tailwind, and code Playground

by D7460N

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.3.5/split.min.js"></script>
<div id="header" class="split content header"></div>
<div id="main" class="split main">
	<div id="home" class="split content split-horizontal home"></div>
	<div id="filter" class="split content split-horizontal filter"></div>
    <div id="results" class="split content split-horizontal results"></div>
	<div id="profile" class="split content split-horizontal profile"></div>
    <div id="details" class="split content split-horizontal details"></div>
</div>
<div id="footer" class="split content footer"></div>

CSS

html,
 body {height: 100%;}
 
 body {
     padding: 0;
     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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
 }
 
 .gutter.gutter-vertical {
     cursor: row-resize;
     background-image: url('../grips/horizontal.png');
 }
 
 .split.split-horizontal,
 .gutter.gutter-horizontal {
     height: 100%;
     float: left;
 }
 
/* RESIZING */
/*.main {display: flex;}
.home {flex: 1 1 250px;}
.filter {flex: 0 0 250px;}
.results {flex: 1 1 auto;}
.profile {flex: 1 1 auto;}
.details {flex: 1 1 150px;}*/

JavaScript

Split(['.header', '.main', '.footer'], {
        gutterSize: 10,
        cursor: 'pointer',
        direction: 'vertical'
    });
	
Split(['.home','.filter', '.results', '.profile', '.details'], {
        //sizes: [15, 15, 40, 15, 15],
        gutterSize: 10,
        cursor: 'row-resize'
    });