JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
	    <div class="item">1</div>
		<div class="item2">2</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<div class="item3">3</div>
		<div class="item3">3</div>
	</div>
</body>
</html>

CSS

body  {
	margin: 0;
}
.container{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.item{
    width: calc(100% / 12 * 12 - 40px);
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid red;
}

.item2{
    width: calc(100% / 12 * 6 - 40px);
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid red;
}

.item3{
    width: calc(100% / 12 * 4 - 40px);
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid red;
}