JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="container">	

    <div class="row content" id="ms-container">

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
        <img class="img-responsive" src="http://nr.x10.mx/images/photo-01.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-02.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-03.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-04.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-05.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-06.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-07.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-08.jpg">
	<div class="overlay"></div>
    </div>

	<div class="col-xs-6 col-sm-4 col-md-2 ms-item">
    <img class="img-responsive" src="http://nr.x10.mx/images/photo-09.jpg">
	<div class="overlay"></div>
    </div>

	<div...

CSS

.clearfix:before, .clearfix:after {
 content: " "; display: table;
}
.clearfix:after {
 clear: both
}
.clearfix {
 *zoom: 1
}
html, body {
 min-height: 100% !important; height: 100%; padding: 0; margin: 2%;
}
.loader {
 background: url("../loader.gif") no-repeat center center
}
.container, .header {
 width: 100%; max-width: 1400px; margin: 0 auto; padding: 0;
}
.overlay {
 position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; background: rgba(255,255,255,.80) url("http://nr.x10.mx/plus.png") no-repeat center center; opacity: 0; height: 100%; -webkit-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); -moz-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); -o-transition: all 0.8s cubic-bezier(0.23,1,0.32,1); transition: all 0.8s cubic-bezier(0.23,1,0.32,1);
}
.overlay:hover {
 opacity: 1
}
.ms-item {
 padding-left: 5px !important; padding-right: 5px !important; margin-top: 10px;
}

.footer {
 height: 40px
}

JavaScript

var container = document.querySelector('#ms-container');
	imagesLoaded( container, function() {
	var msnry = new Masonry( container, {
  	itemSelector: '.ms-item',
  	columnWidth: '.ms-item',   
	});
	});