JSFiddle - React, Tailwind, and code Playground
by userdude
HTML
<h1 style="font-size: 1.6em; text-align: center;">The Beaker Bunch</h1>
<div id="container">
<div class="row">
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<div class="block">
<img src="http://goo.gl/UohAz"/>
</div>
<br/>
</div>
</div>
CSS
#container {
width: 95%;
max-width: 646px;
margin: 10px auto;
border: 5px solid black;
padding: 5px;
}
#container .row {
border: 1px solid green;
border-left: 0;
border-top: none;
margin: 0;
padding: 0;
}
#container br {
clear: both;
}
#container .block {
border: 1px solid blue;
border-bottom: 0;
border-right: 0;
float: left;
width: 128px;
}