JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="wrap">
    <div class="item">
        <div class="padding">
            <div class="content"></div>
        </div>
    </div>
    <div class="item">
        <div class="padding">
            <div class="content"></div>
        </div>
    </div>
    <div class="item">
        <div class="padding">
            <div class="content"></div>
        </div>
    </div>
    <div class="item">
        <div class="padding">
            <div class="content"></div>
        </div>
    </div>
    <div class="item">
        <div class="padding">
            <div class="content"></div>
        </div>
    </div>
</div>

CSS

.wrap {
    position: relative;
    width: auto;
    margin: 0 auto;
}
.item {
    width: 24.5%;
    height: 400px;
}
.padding {
    width: 100%;
    height: 100%;
}
.content {
    position: absolute;
    top: 5px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    background-color: orange;
}
/*
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, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

var $container = $('.wrap')
// initialize Isotope
$container.isotope({
    itemSelector: '.item',
    animationEngine: 'best-available',
    resizable: false, // disable normal resizing
    // set columnWidth to a percentage of container width
    masonry: {
        columnWidth: $container.width() / 4
    }
});

// update columnWidth on window resize
$(window).smartresize(function () {
    if ($(window).width() > 768) {
        $container.isotope({
            masonry: {
            columnWidth: $container.width() / 4
                }
        });
    }    
    if ($(window).width() < 768) {
        $container.isotope({
            masonry: {
            columnWidth: $container.width() / 3
                }
        });
    }
    if ($(window).width() < 400) {
        $container.isotope({
            masonry: {
            columnWidth: $container.width() / 2
                }
        });
    }    
});