JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<section id="main">
        <!-- toolbar header -->
        <header class="toolbar" id="manageToolbar">
            <button>Open</button><button>Save</button>...
        </header>
        <!-- contains the sidebar and content -->
        <section id="manage" class="screen" toolbar="mangeToolbar">
            <!-- left sidebar -->
            <aside class="sidebarLeft">
                <b>Left sidebar</b>
            </aside>
            <!-- main content -->
            <section class="main">
                Main Contents
            </section>
        </section>
        <footer>
            Footer stuff goes here, theoretically
        </footer>
    </section>

CSS

html,body {margin:0;padding:0; height: 100%;}
        #main {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            background: purple;
            height: 100%;
            padding: 10px;
        }
        .toolbar {
            background: blue;
        }
        .screen {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            background: skyblue;
            padding: 10px;
        }
        .main {
            -webkit-box-flex: 1;
            background: lime;
        }
        .sidebarLeft {
            width: 200px;
            background: yellow;
        }
        footer {
            background: orange;
        }