JSFiddle - React, Tailwind, and code Playground

by Amit Joki

HTML

<div class="template">
    <div class="template-header"></div>
    <div class="template-navigation"></div>
    <div class="template-content">
        <div class="template-content-left"></div>
        <div class="template-content-middle"></div>
        <div class="template-content-right"></div>
    </div>
    <div class="template-footer"></div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.template
{
    height: 100%;
}

.template-header
{
    background:red;
    height: 10%;
}

.template-navigation
{
    background:grey;
    height: 5%;
}

.template-content
{
    background:silver;
    height:80%;
}

.template-content-left
{
    float:left;
    background: magenta;
    height: 100%;
    width: 200px;
}

.template-content-middle
{
    background: magenta;
    width: calc(100% - 400px);
    height: 100%;
    float:left;
}

.template-content-right
{
    float:left;
    background: magenta;
    height: 100%;
    width: 200px;
}

.template-footer
{
    background: blue;
    height: 5%;
}