JSFiddle - React, Tailwind, and code Playground
HTML
<div class="group">
<article class="feature">
<h1>Block 1</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 2</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 3</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 4</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 5</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 6</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 7</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
<article>
<h1>heading</h1>
<div></div>
</article>
</div>
<div class="group">
<article class="feature">
<h1>Block 8</h1>
<div></div>
</article>
<article>
...
CSS
.group {
width: 300px;
float: left;
margin: 0 20px 20px 0;
}
article {
width: 150px;
height: 150px;
background-color: #666;
float: left;
}
article.feature {
width: 300px;
height: 300px;
background-color: #333;
}