JSFiddle - React, Tailwind, and code Playground

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Kitties</title>
  <link rel="icon" type="image/gif" href="lol_cats_wallpaper.gif" />
  <link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body>

<div id="container">
<div class="row" id="row_1">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<div class="row" id="row_2">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<div class="row" id="row_3">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
<div class="row" id="row_4">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
</div>

</body>
</html>

CSS

#container{margin:0 auto; width:1080px; background-color: yellow;}
  	.item{width:23%; background: black; height:100px; display:inline-block; padding:0 9px;}
  	.row{padding:0 0 4px;}
  	#row_1{height:100px;}
  	#row_2, #row_2 .item{height:200px;}
  	#row_3{height:100px;}
  	#row_4, #row_4 .item{height:200px;}