JSFiddle - React, Tailwind, and code Playground

by gkohen

HTML

<div id="workbenchPanel" class="clearfix">
    <div id="topPanel" class="newBorderBox">
        <div id='tp1' class='panelItem topPanelItem'>TPanel1</div>
        <div id='tp2' class='panelItem topPanelItem'>TPanel2</div>
        <div id='tp3' class='panelItem topPanelItem'>TPanel3</div>
    </div>
    <div id="leftPanel" class="newBorderBox">
            <div id='lp1' class='panelItem leftPanelItem'>LPanel1</div>
            <div id='lp2' class='panelItem leftPanelItem'>LPanel2</div>
            <div id='lp3' class='panelItem leftPanelItem'>LPanel3</div>
    </div>
    <div id="content" class="newBorderBox">
        <div id='dwGraph'>Graph</div>
        <div id='dwGrid'>Grid</div>
    </div>
</div>

CSS

.clearfix {
  overflow: auto;
}

.newBorderBox{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
#workbenchPanel{
    width:800px;
    height:600px;
    position:relative
}
#leftPanel, #content, #topPanel {
    background-color:#c0c0c0;
}
#topPanel {
    height: 100px;
    background: blue;
    padding: 15px;
    left: 100px;
    position: absolute;
    right: 0px;
}
#leftPanel {
    width:100px;
    padding : 5px;
    background:red;
    float:left;
    position: absolute;
    bottom: 0px;
    top: 0px;
}
#content {
    background-color:#c0c0c0;
    margin-left:100px;
    background:green;
    padding:5px;
    position: absolute;
    bottom: 0px;
    top: 100px;
    right: 0px;
    left: 0px;

}

.panelItem {
    border:1px solid black;
    margin:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.topPanelItem {
    float:left;
    height:100%;
    width:31%;
}
.leftPanelItem {
    height:31%;
}
#dwGrid {
    
}
#dwGraph {
    height:100px;
    border-bottom:dashed 1px black;
}

JavaScript

var DWPanel = function () {
    var panelOpen = true;
    this.toggle1 = function () {
    };
    this.topPanelAdjust = function () {
        $("#topPanel .topPanelItem").width(panelOpen ? (560 - 12) / 3 : (500 - 12) / 3);
    };
};

var dwPanel = new DWPanel();

$("#leftPanelHide").click(function () {
    dwPanel.toggle1();
});