JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

			<div id="middle">
				<div class="right"></div>
				<div class="center"></div>
				<div class="left"></div>
				<div style="clear: both;"></div>
			</div>
			<div id="bottom">
				<div id="first">
					<div class="right"></div>
					<div class="center"></div>
					<div class="left"></div>
				</div>
				<div id="second">
					<div class="module"></div>
					<div class="banner"></div>
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>

CSS

div#container {
	width: 1000px;
	height: 100%;
	margin: 45px auto; 
	background: green;
}
div#middle {
	width: 100%;
	height: 560px;
	margin-top: 20px;
}
div#middle .right {
	float: right;
	width: 205px;
	height: 100%;
	background: yellow;
}
div#middle .center {
	float: right;
	width: 455px;
	height: 100%;
	margin: 0 10px; 
	background: orange;
}
div#middle .left {
	float: left;
	width: 320px;
	height: 100%;
	background: blue;
}




/*Bottom section*/
div#bottom {
	width: 100%;
	height: 100%;
	margin-top: 20px;
	background: brown;
}
div#bottom #first {
	float: right;
	width: 100%;
	height: 400px;
	background: red;	
}
div#bottom #first .right {
	float: right;
	width: 325px;
	height: 100%;
	background: pink;
}
div#bottom #first .center {
	float: right;
	width: 325px;
	height: 100%;
	margin: 0 12px;
	background: pink; 
}
div#bottom #first .left {
	float: left;
	width: 325px;
	height: 100%;
	background: pink;
}
div#bottom #second {
	float: right;
	width: 100%;
	height: 100%;
	background: black;
	margin-top: 10px;
}
div#bottom #second .module {
	float: right;
	width: 325px;
	height: 100%;
	background: silver;
}
div#bottom #second .banner {
	float: left;
	width: 645px;
	min-height: 100px;
	vertical-align: bottom;
	background: silver;
}