JSFiddle - React, Tailwind, and code Playground

HTML

<div class="framecontentLeft">
 <div class="sidebar-toggle"></div>
<div class="innertube">

</div>
</div>

<div id="framecontentTop">
<div class="innertube">

</div>
</div>

<div id="maincontent">
<div class="innertube">
<iframe name="contents" src="" id="iframe1" frameborder="0" style="moz-overflow:hidden;moz-overflow-x:hidden;moz-overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"> </iframe>

</div>
</div>

CSS

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

.framecontentLeft, #framecontentTop{
position: absolute; 
top: 0; 
left: 0; 
width: 150px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: silver;
color: #000;
}

#framecontentTop{ 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: green;
color: white;
}

#maincontent{
position: fixed; 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 

	background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent;
    border-color: rgb(154, 205, 50);
	padding-top: 10px;
	padding-bottom:10px;
    z-index: 1;
    border-width: 20px medium 20px;
    border-style: solid none;
    box-shadow: 1px 2px 4px 1px rgba(204, 204, 204, 0.2);
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

.sidebar-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: black;
}

JavaScript

$(document).ready(function() {
  sidebarStatus = false;
  $('.sidebar-toggle').click(function() {
    if (sidebarStatus == false) {
      $('.framecontentLeft').animate({
        marginLeft: "-150px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
	   $('#maincontent').animate({
        left: "0px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = true;
    }
    else {
      $('.framecontentLeft').animate({
        marginLeft: "0px",
        opacity: "1"
      }, 'medium');
      $('#framecontentTop').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
	  $('#maincontent').animate({
        left: "150px",
        opacity: "1"
      }, 'medium');
      sidebarStatus = false;
    }
  });
    
    var iframeDoc = $('#iframe1').contents().get(0);
    $(iframeDoc).bind('click', function( event ) {
    if(!sidebarStatus)
        {
                   $('.sidebar-toggle').click();
        }
    });
});