JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper clearfix">
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
    <div class="item"><a href="#"><img src="http://placehold.it/350x200" class="gallery_img" /></a></div>
</div>

CSS

.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}

.wrapper {}
.wrapper .item {
    float: left;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background: red;
    margin: 0 10px 10px 0;
}
.wrapper .item img {
    vertical-align: middle;
    max-height: 100px;
    max-width: 100px;
}