JSFiddle - React, Tailwind, and code Playground

by gudoy

HTML

<div class="layout page">
		
		<header class="header" id="header">
			<div class="headerHeader" id="headerHeader"></div>
			<div class="headerContent" id="headerContent"></div>
			<div class="headerFooter" id="headerFooter"></div>
		</header>
  		  		
  		<div class="body" id="body">
  			<aside class="aside" id="aside">
  				<header class="header asideHeader"></header>
  				<div class="asideContent" id="asideContent">
  					Aside content goes here....
  				</div>
  				<footer class="asideFooter"></footer>
  			</aside>
  			<div class="main" id="main">
  				<header class="header mainHeader" id="mainHeader">
  					<a id="menuAction" class="action menuAction" href="#mainNav"><span class="label">Menu</span></a>
  					<h2 class="title">Home</h2>
  				</header>
  				<div class="mainContent" id="mainContent">
  					Main content goes here...
  				</div>
  				<footer class="mainFooter" id="mainFooter"></footer>
  			</div>
		</div>
		
		<footer class="footer" id="footer">
			<header class="header footerHeader" id="footerheader"></header>
  			<div class="footerContent" id="footerContent"></div>
  			<footer class="footerFooter" id="footerFooter"></footer>
		</footer>
  		  	
  	</div>

CSS

#header { background:green; } 
#body { background:blue; } 
#body .header { background:violet; }

/* Layout (start) */
html, body { width:100%; height:100%; overflow:hidden; overflow-x:hidden; -webkit-text-size-adjust:none; }
html { overflow-y:hidden; }
body { margin:0; padding:0; }

.page { width:100%; height:100%; overflow-y:hidden; position:relative; -webkit-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); }

.page > .header { max-width:0; height:auto; background:#ff6600; }
.page > .header.active { }
.page > .body { position:relative; }
.page > .body > .aside { display:none; }
.page > .footer { display:none; }

.menuAction { display:inline-block; position:absolute; left:10px; top:8px; }

.logoutAction { display:inline-block; position:absolute; right:10px; top:8px; }

/* Layout (end) */

/* Flexbox (start) */
.page,
.page > .body,
.body > .main,
.login .secretCode .actions,
.accountsDetail .accountsSummary .accounts,
.accountsDetail .mainContent { display:-webkit-flex; display:-ms-flexbox; display:-ms-flex; display:flex; }

.page,
.login .secretCode .actions,
.accountsDetail .accountsSummary .accounts { -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; }
.page > .body,
.body > .main,
.accountsDetail .mainContent { -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; }

.login .secretCode .actions { -webkit-justify-content:center; -ms-justify-content:center; justify-content:center; }

/*.page > .header,*/
.page > .body,
.body > .main,
.mainContent,
.login .secretCode .actions .action,
.accountsDetail .accountOperations { -webkit-flex:1; -ms-flex:1; flex:1; }

.chrome.accountsDetail .accountOperations { min-height:1px; max-height:100%; }
.accountsDetail .accountOperations {  }
/* Flexbox (end) */

/* No Flexbox (start) */