JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://new3.sb-studio.co.uk/wp-content/themes/sb2013/js/jquery.isotope.min.js"></script>
<script src="http://www.liverpoolcraftbeerexpo.com/wp-content/themes/lcbe/js/jquery.imagesloaded.js"></script>
<div class="grid-wrap">
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div class="grid-block">
        <div class="content">
            <div class="block">
                <img src="http://placekitten.com/400/500" />
                <div class="block-text">TITLE</div>
            </div>
        </div>
    </div>
    <div...

CSS

/*
RESETS ------------------------
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align:;
    background: transparent;
}
/*
RESETS END --------------------
*/
 .grid-wrap {
    position: relative;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 100px;
    display: inline-block;
    vertical-align: text-top;
}
.grid-block {
    width: 24.8999999%;
    float: left;
    height: auto;
    background: orange;
    margin-bottom: 30px;
}
.grid-block .content {
    padding: 10px;
    padding-top: 0px;
}
.grid-block.first .content {
    padding-left: 0px;
}
.grid-block.last .content {
    padding-right: 0px;
}
.grid-block .content .block {
    position: relative;
    width: 100%;
    height: auto;
}
.grid-block .content .block img {
    position: relative;
    width: 100%;
    height: auto !important;
}
.grid-block .content .block .block-text {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 10px;
    text-align: center;
}
@media only screen and (max-width: 750px) {
    .grid-block {
        width: 49.888888%;
    }
}
@media only screen and (max-width: 550px) {
    .grid-block {
        width: 100%;
    }
}
/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height,...

JavaScript

$(document).ready(function () {
        setTimeout(function () {
            $('.grid-wrap').isotope('reLayout');
        }, 1000);
    });


    $(function () {

        var $container = $('.grid-wrap');

        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '.grid-block',
                animationEngine: 'best-available',
                resizable: false, // disable normal resizing
                // set columnWidth to a percentage of container width
                masonry: {
                    columnWidth: $container.width() / 4
                },


                itemPositionDataEnabled: true,
                onLayout: function (elems, instance) {
                    var items, rows, numRows, row, prev, i;

                    // gather info for each element
                    items = elems.map(function () {
                        var el = $(this),
                            pos = el.data('isotope-item-position');
                        return {
                            x: pos.x,
                            y: pos.y,
                            w: el.width(),
                            h: el.height(),
                            el: el
                        };
                    });

                    // first pass to find the first and last items of each row
                    rows = [];
                    i = {};
                    items.each(function () {
                        var y = this.y,
                            r = i[y];
                        if (!r) {
                            r = {
                                y: y,
                                first: null,
                                last: null
                            };
                            rows.push(r);
                            i[y] = r;
                        }
                        if (!r.first || this.x < r.first.x) {
                            r.first = this;
                       ...