JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topdiv"></div>
<div id="leftdiv"></div>
<div id="rightdiv"></div>
<div id="bottomdiv">
    <div id="page3" onClick='document.getElementById("ifr").src="text2.html"; moveGridLeft();'>2</div>
    <div id="page1" onClick='document.getElementById("ifr").src="text1.html";'>1</div>
    
</div>

<div id="middlediv"><iframe id='ifr' width='100%' height='100%' src="text1.html"</iframe></div>





</body>

CSS

#topdiv{
position: absolute; top: 0px; left: 0px; 
width: 100%;
height: 100px;
background: red;

}

#leftdiv{
position: absolute; top: 100px; left: 0px; 
width: 100px;
height: 150px;
background: black;
margin-top: 5px;
margin-bottom: 5px;

}
#rightdiv{
position: absolute; top: 100px; right: 0px; 
width: 100px;
height: 150px;
background: black;
margin-top: 5px;
margin-bottom: 5px;

}
#middlediv{
position: absolute; top: 100px; left: 100px; 
width: 100px;
height: 150px;
background: green;
margin-top:5 px;
margin: 5px;

}
#bottomdiv{
bottom: 0px; left: 0px; 
width: 100%;
height: 100px;
background: blue;
position: absolute;
}

#bottomdiv div {
float:right;
bottom: 5%; 
margin:5px;
width: 20px;
height: 20px;
background: grey;
xxxposition: absolute;
}

JavaScript

function proc1(){ 
    var  wwidth=window.innerWidth,
        wheight=window.innerHeight; //alert(wwidth+' '+wheight);
    document.getElementById('rightdiv').style.height=(wheight-200-10)+'px';
    document.getElementById('leftdiv').style.height=(wheight-200-10)+'px';
    document.getElementById('middlediv').style.height=wheight-200-10+'px';
    document.getElementById('middlediv').style.width=wwidth-200-10+'px'; 
}

function moveGridLeft(){ 
    $('#page3').animate({ 'marginRight' : "+=50px" });
}

window.onload=function(){ proc1(); };
window.onresize=function(){ proc1(); };