JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<header id="head">
    <h1>Bismo</h1>
</header>

<div id="toolbar">
    <div id="control1" class="toolbarControls">
    </div>
    <div id="control2" class="toolbarControls">
    </div>
    <div id="control3" class="toolbarControls">
    </div>
</div>

CSS

body
{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
#head
{
    width:100%;
    height:60px;
    background-color:rgb(88,143,39);
    text-align:center;
    position:absolute;
    top:0;
    left:0;
}
#toolbar
{
    width:80px;
    position:absolute;
    top:60px;
    left:0;
    bottom:0;
    background-color:rgb(167,163,126);
}
.toolbarControls
{
    width:50px;
    height:50px;
    background-color:rgb(230,236,175);
    margin-top:80px;
}