JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">
			<div class="grid-row">
				<div class="grid-cell grid-cell-4">
					<div>grid-cell-4</div>
				</div>
				<div class="grid-cell grid-cell-4">
					<div>grid-cell-4</div>
				</div>
				<div class="grid-cell grid-cell-4">
					<div>grid-cell-4</div>
				</div>
				<div class="grid-cell grid-cell-4">
					<div>grid-cell-4</div>
				</div>
			</div>
			<div class="grid-row">
				<div class="grid-cell grid-cell-3">
					<div>grid-cell-3</div>
				</div>
				<div class="grid-cell grid-cell-3">
					<div>grid-cell-3</div>
				</div>
				<div class="grid-cell grid-cell-3">
					<div>grid-cell-3</div>
				</div>
			</div>
			<div class="grid-row">
				<div class="grid-cell grid-cell-2">
					<div>grid-cell-2</div>
				</div>
				<div class="grid-cell grid-cell-2">
					<div>grid-cell-2</div>
				</div>
			</div>
			<div class="grid-row">
				<div class="grid-cell grid-cell-4">
					<div>grid-cell-4</div>
				</div>
				<div class="grid-cell grid-cell-3-4">
					<div>grid-cell-3-4</div>
				</div>
			</div>
			<div class="grid-row">
				<div class="grid-cell grid-cell-1">
					<div>grid-cell-1</div>
				</div>
			</div>
		</div>

CSS

* {margin: 0; padding: 0;}
body {font-family: 'Segoe UI'; font-size: 30px; font-weight: 700;}
.grid-cell div {display: block; border: 1px solid rgba(155,155,155,0.6); background-color: rgba(220,220,220,0.9);border-radius: 2px; box-shadow: 0 0 5px 0 rgba(20,20,20,0.3); text-align: center; padding: 22px 0 25px;}

/*===================================================*/

.grid-container {
	display: block;
	margin: 0 auto;
	padding: 20px;
}
.grid-row {
	margin-bottom: 20px;
}
.grid-row:after {
	display: block;
	clear: both;
	content: '';
}
.grid-container .grid-row:last-child {
	margin-bottom: 0;
}
.grid-cell {
	display: block;
	float: left;
	margin-right: 20px;
}
.grid-row .grid-cell:last-child {
	margin-right: 0;
}
@media all and (max-device-width: 880px) {
	.grid-container, .grid-row:after, .grid-cell-1 {
		width: 820px;
	}
	.grid-cell-4 {
		width: 190px;
	}
	.grid-cell-3 {
		width: 260px;
	}
	.grid-cell-2 {
		width: 400px;
	}
	.grid-cell-2-3 {
		width: 540px;
	}
	.grid-cell-3-4 {
		width: 610px;
	}
}
@media all and (min-device-width: 880px) {
	.grid-container, .grid-row:after, .grid-cell-1 {
		width: 940px;
	}
	.grid-cell-4 {
		width: 220px;
	}
	.grid-cell-3 {
		width: 300px;
	}
	.grid-cell-2 {
		width: 460px;
	}
	.grid-cell-2-3 {
		width: 620px;
	}
	.grid-cell-3-4 {
		width: 700px;
	}
}
@media all and (min-device-width: 1100px) {
	.grid-container, .grid-row:after, .grid-cell-1 {
		width: 1060px;
	}
	.grid-cell-4 {
		width: 250px;
	}
	.grid-cell-3 {
		width: 340px;
	}
	.grid-cell-2 {
		width: 520px;
	}
	.grid-cell-2-3 {
		width: 700px;
	}
	.grid-cell-3-4 {
		width: 790px;
	}
}
@media all and (min-device-width: 1220px) {
	.grid-container, .grid-row:after, .grid-cell-1 {
		width: 1180px;
	}
	.grid-cell-4 {
		width: 280px;
	}
	.grid-cell-3 {
		width: 380px;
	}
	.grid-cell-2 {
		width: 580px;
	}
	.grid-cell-2-3 {
		width: 780px;
	}
	.grid-cell-3-4 {
		width: 880px;
	}
}
@media all and (min-device-width: 1340px) {
	.grid-container, .grid-row:after, .grid-cell-1...