JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<section class="main-window">
    <div id="topdiv"></div>
    <div id="middiv"></div>
    <div id="botdiv"></div>
</section>

CSS

.main-window {
    vertical-align: middle;
    border: 2px solid gray;
    border-radius: 5px;
    width: 90%;
    height: 70%;
    background-color: White;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#topdiv {
    background-color: beige;
    height: 40%;
    border: 2px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#middiv {
    background-color: lightblue;
    height: 40%;
    border: 2px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
#botdiv {
    background-color: lightgreen;
    height: 20%;
    border: 2px solid black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}