JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="box vertical">
    <div class="box top"></div>
    <div class="box flex horizontal">
        <div class="box left"></div>
        <div class="box flex middle">
            <div class="vertical">
                <div class="box flex inner">
:)                    
                </div>
            </div>
        </div>
        <div class="box right"></div>
    </div>
    <div class="box bottom"></div>
</div>

CSS

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

.box {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
} 
.flex{
 -webkit-box-flex: 1;
 -moz-box-flex: 1;
 box-flex: 1;    
}
.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}
.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;  
}    
.top, .bottom {
 width: 100%;
 height: 50px;  
}
.left, .right {
 width: 50px;
 height: 100%;    
}
.top {
 background: red;   
}
.bottom {
 background: blue;   
}
.left {
 background: green;   
}
.right {
 background: orange;   
}
.midde {
 background: pink;  
}