JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header">
    </div>
    <div class="mainContent">
        <div class="slideBar"></div>
        <div class="content">
            up
            <div class="div1">
                Hello
            </div>
            down
        </div>
    </div>
    <div class="footer"></div>
</body>

CSS

html, body {
margin:0px;
height:100%;
}
.header {
    width:100%;
    height:20%;
    background-color:red;
    border-radius:10px;
}
.footer {
    width:100%;
    height:20%;
    background-color:green;
}
.mainContent {
    width:100%;
    height:60%;
}
.slideBar {
    width:20%;
    height:100%;
    float:left;
    background-color:blue;
}
.content {
    width:80%;
    height:100%;
    float:right;
    background-color:yellow;
}
    .content .div1 {
        border:2px solid black;
        margin-left:10px;
        display: inline-block;
    }