JSFiddle - React, Tailwind, and code Playground

by digitalmedia

HTML

<body>
<div class="container">
	<div class="header">
		<div class="reducer">
			<div class="header-top">
				header
			</div>
		</div>
	</div>

	<div class="content-wrap">
		<div class="content reducer">
			<div class="clearfix" style="height:100%;">
				<div class="leftside">
					<div class="rect-wrapper">
						<div class="rect">Left</div>
					</div>
				</div>
				<div class="rightside">
					<div class="rect-wrapper">
						<div class="rect">Right</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>


</body>

CSS

html, body{height:100%;margin:0;padding:0;}
body {font:1.125em/1.3 'PT Sans', arial, sans-serif;color:#fff;background-color:#1f1e26;}

img {
    max-width: 100%;
    height: auto;
}
@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}
/*Layout*/
.container {min-height:100%;height: auto;height: 100%;}
.reducer{width:100%;padding:0 20px;}
.content{height:100%;}
.header{position:relative;background-color:#ccc;height:13%;}
.content-wrap {height:87%;position:relative;}
.rect-wrapper{width:80%; margin:0 auto;}

.rect {
height: 0;
top: 0;
left: 0;
overflow: hidden;
position: relative;
width: 100%;
padding-bottom: 128%;
border:solid 5px #fff;
z-index: 0;
}
.leftside, .rightside{width:50%;height:100%;}
.leftside{float:left}
.rightside{float:right;position:relative;left:0;}
.leftside .rect-wrapper{float:right;padding-right:30px;height:100%;}
.rightside .rect-wrapper{float:left;padding-left:30px;height:100%;}

.clearfix:before,
.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}
* {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}