JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div id='head'></div>
<div id='main'>
    
<div id='left'>
main contents<br/>  
<div style="height:30px;"></div>
</div>
    
    
    
<div id='right'>
main contents<br/>
<div style="height:30px;"></div>
</div>
    
    
</div>
<div id='foot'></div>

CSS

* {margin:0; padding:0;}

body  {
  background:#fff; 
  position:absolute; 
  width:100%; 
  height:100%; 
  overflow-x:hidden;
  overflow-y:hidden;
  scrollbar-base-color: #fff;
  scrollbar-base-color: #e1e1e1;
  scrollbar-3dlight-color: #fff;
  scrollbar-highlight-color: #fff;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #fff;
  scrollbar-shadow-color: #e1e1e1;
  scrollbar-dark-shadow-color: #fff;
}


#main  {background:#fff; height:100%; width: 100%; padding:60px 0 0; box-sizing:border-box;}

#head  {background:#fff; position:absolute; width:100%; height:0px;}
#foot  {background:#fff; position:relative; bottom:0; width:100%; height:0px;}

#left  {background:#ff8; float:right; height:100%; width:600px; padding:0px 20px; overflow-y:scroll; overflow-x:hidden;}
#right {background:#8f8;  padding:0px 20px; height:100%; overflow-y:scroll; overflow-x:hidden;}



@media (max-width:1200px) {
#left, #right {width: 100%; max-width:100%; float:left; height:auto; overflow-y:scroll;}
body   { overflow-y:scroll; }
}