JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<body>
    
<div id="div_top_row">
	<iframe id="iframe_top" src="">
	</iframe>
</div>

<div id="div_middle_row">
	<iframe id="iframe_left" src="">
	</iframe>
	<iframe id="iframe_right" src="">
	</iframe>
</div>

<div id="div_bottom_row">
	<iframe id="iframe_bottom" src="">
	</iframe>
</div>

</body>

CSS

html {
	background: Green;
	height: 100%;
}

body {
	background: LightBlue;
	position: absolute; 
	top: 0; 
	bottom: 0; 
	right: 0; 
	left: 0;
}

iframe {
	box-sizing: border-box;
}

#div_top_row {
	width: 100%;
	height: 20%;
}

#iframe_top {
	background-color: Red;
	width: 100%;
	height: 100%;
}

#div_middle_row {
	width: 100%;
	height: 70%;
}

#iframe_left, #iframe_right {
	float: left;
	height: 100%;
}

#iframe_left {
	background-color: Blue;
	width: 30%;
}

#iframe_right {
	background-color: Yellow;
	width: 70%;
}

#div_bottom_row {
	width: 100%;
	height: 10%;
}

#iframe_bottom {
	background-color: Orange;
	width: 100%;
	height: 100%;
}