JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8" ?>
<html>
<head>
<title>Kitties</title>
</head>
<body>
<div class="gallery">
<div class="row">
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
</div>
<div class="row">
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg" height="100px"/>
<h6>Title</h6>
</div>
<div class="item">
<img src="http://dl.dropbox.com/u/65104705/Temp%20Web/cat_sniping.jpg"/>
<h6>Title</h6>
</div>
...
CSS
.gallery {
width:450px;
}
.item {
width:90px;
margin-right:10px;
margin-bottom:10px;
background-color:#ccc;
padding:5px;
float:left;
}
.item img {
width:100%;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.row {
zoom:1;
}