JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="layout">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

SCSS

.layout {
	font-size: 0;
	text-align: right;
	min-height: 700px;
	background-color: #EEE;

	> * {
		display: inline-block;
		vertical-align: top;
		font-size: 1rem;
		text-align: left;
	}

	> :nth-child(1) {
		width: 50%;
		min-height: 400px;
		background-color: red;
	}

	> :nth-child(2),
	> :nth-child(3) {
		width: 25%;
		min-height: 175px;
		float: left;
		background-color: yellow;
	}

	> :nth-child(3) {
		background-color: green;
		clear: left;
	}

	> :nth-child(4) {
		width: 25%;
		min-height: 400px;
		background-color: blue;
		height: 100%;
	}
}