JSFiddle - React, Tailwind, and code Playground

by Ozren Tkalčec Krznarić

HTML

<body>
    <div class="container">
        <div class="header cell">
            Top
        </div>
        <div class="middle">
            <div class="left cell">
                Left
            </div>
            <div class="center cell">
                Center
            </div>
            <div class="right cell">
                Right
            </div>
        </div>
        <div class="bottom">
            <div class="footer cell">
                Footer
            </div>
        <div class="middle">
    </div>
</body>

CSS

html, body { 
    height: 100%;
    margin: 0px
}

.container { 
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0px
}

.header {
    height: 55px;
}

.middle {
    display: table-row;
}

.bottom {
    display: table-row;
}

.footer {
    height: 25px;
}

.left {
    width: 60px;
}

.center {
    
}

.right {
    width: 100px;
}


.cell {
    display: table-cell;
    vertical-align: top;
    background-color: #f3ca12;
}