JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="container" class="column">
	<div class="row">
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
	</div>
	
	<div class="row">
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
	</div>
	
	<div class="row">
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
		<div class="column">
			item
		</div>
	</div>
</div>

CSS

html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

#container{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	background:rgb(27,27,27);
}

.row{
	flex-grow:1;
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	background:yellow;
}

.column{
	flex-grow:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	background:red;
	border:solid 2px blue;
}