JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="header"></div>
        <div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <div id="footer"></div>
    </body>
</html>

CSS

body
{
    margin: 0;
    padding: 0;
}

#header
{
    width: 100%;
    height: 30px;
    background: red;
}

#main
{
    width: 100%;
    height: 100px;
}

#left
{
    float: left;
    width: 20%;
    background: gray;
    height: 100%;
}

#right
{
    background: black;
    height: 100%;
}

#footer
{
    width: 100%;
    height: 30px;
    background: green;
}