JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="editor model-editor">
    <div class="editor-nav-top">
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>       
    </div>
    <button class="corner">Line</button>
   <div class="editor-nav-left">
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
        <button>Line</button>
    </div>
    <canvas id="canvas">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
</div>

CSS

.editor{
    
}
.editor button{
    background-color:#001F3F;
    border:0;
    color:#fff;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -ms-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}
.editor button:hover{
 background-color:#7FDBFF;   
}
.editor .editor-nav-top button{
    float:left;
    border-right:1px solid #0074D9;
}

.editor .editor-nav-left button{
    display:block;
    border-bottom:1px solid #0074D9;
}
.editor .editor-nav-left{
    position:fixed;
    top:0;
}
.editor button.corner{
    position:fixed;
    top:0;
    left:0;
}
.editor button.corner{
    position:fixed;
    top:0;
    left:0;
    border-right:1px solid #0074D9;
    border-bottom:1px solid #0074D9;
}
#canvas{
    position:fixed;
    right:0;
    bottom:0;
}

JavaScript

function editorSize(){
    //toolbar size
    var toolbarSize = 70;
    //window
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    
    $('.model-editor').css('height', windowHeight);
    $('.model-editor').css('width', windowWidth); 
    
    $('#canvas').css('height', windowHeight - toolbarSize);
    $('#canvas').css('width', windowWidth - toolbarSize); 
    // navigation
    // top toolbar
    var topButtonsCount = $( ".editor-nav-top button" ).length;
    var topButtonSize = 100 / topButtonsCount;
    $('.editor-nav-top button').css('width', topButtonSize + '%');
    $('.editor-nav-top').css('margin-left', toolbarSize)
    $('.editor-nav-top button').css('height', toolbarSize)
    // right toolbar
    var leftButtonsCount = $( ".editor-nav-left button" ).length;
    var leftButtonSize = 100 / leftButtonsCount;
    $('button.corner').css('width', toolbarSize);
    $('button.corner').css('height', toolbarSize);
    var leftNavHeight = windowHeight - toolbarSize;
    $('.editor-nav-left').css('height', leftNavHeight);
    $('.editor-nav-left').css('top', toolbarSize);
    $('.editor-nav-left button').css('height', leftButtonSize + '%');
    $('.editor-nav-left button').css('width', toolbarSize); 
}

editorSize();

$(window).resize(function(){
    editorSize();
});