JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
		</div>
		<div class="row">
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
		</div>
		<div class="row">
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
			<div class="col-3"></div>
		</div>
	</div>
</body>
</html>

CSS

body {
	margin: 0;
}

.container {
	min-width: 1000px;
	padding: 0 10px;
	margin: 0 auto;

	background-color: #0f0;
}

.row {
	display: flex;
	margin: 0 -15px;

	background-color: #ccc;
}

.row + .row {
	margin-top: 30px;
}

[class^="col-"] {
	min-height: 100px;
	margin: 0 15px;

	background-color: red;
}

.col-12 {
	width: calc(100% - 30px);
}
.col-11 {
	width: calc(91.66666667% - 30px);
}
.col-10 {
	width: calc(83.33333333% - 30px);
}
.col-9 {
	width: calc(75% - 30px);
}
.col-8 {
	width: calc(66.66666667% - 30px);
}
.col-7 {
	width: calc(58.33333333% - 30px);
}
.col-6 {
	width: calc(50% - 30px);
}
.col-5 {
	width: calc(41.66666667% - 30px);
}
.col-4 {
	width: calc(33.33333333% - 30px);
}
.col-3 {
	width: calc(25% - 30px);
}
.col-2 {
	width: calc(16.66666667% - 30px);
}
.col-1 {
	width: calc(8.33333333% - 30px);
}