JSFiddle - React, Tailwind, and code Playground

by OriginalEXE

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<div class="kodo-container">
    <div class="row">
        <div class="grid-sizer col-xs-6 col-sm-4 col-lg-3"></div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x320" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x520" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x420" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x420" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x344" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x245" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x276" />
        </div>
        <div class="item col-xs-6 col-sm-4 col-lg-3">
            <img src="http://placehold.it/600x223" />
        </div>
    </div>
</div>

CSS

.kodo-container {

}

.row {
    margin: 0 0 0 -5px;
    overflow: hidden;
}

.item {
    margin-bottom: 5px;
    padding: 0 0 0 5px;
}

.item img {
    display: block;
    height: auto;
    max-width: 100%;
}

.grid-sizer {
    min-height: 1px;
    padding: 0;
}

JavaScript

$( window ).load( function() {
    
    $( '.row' ).isotope({
        itemSelector : '.item',
        layoutMode : 'masonry',
        masonry: {
            columnWidth: '.grid-sizer'
        }
    });
    
});