JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
 <ul id = "filters">
    <li>
        <a href="javascript:;" data-filter=".architecture-competitions" class="architecture-competitions cat-9 cat-item-4" title="View all posts in Architecture Competitions" >Architecture Competitions
        </a>
    </li>
    <li>
        <a href="javascript:;" data-filter=".architecture-news" class="architecture-news cat-6 cat-item-9" title="View all posts in Architecture News" >Architecture News 
        </a> 
    </li> 
    <li>
        <a href="javascript:;" data-filter=".competitions" class="competitions cat-37 cat-item-1" title="View all posts in Competitions" >Competitions 
        </a> 
    </li> 
    <li>
        <a href="javascript:;" data-filter=".design-competitions" class="design-competitions cat-10 cat-item-6" title="View all posts in Design Competitions" >Design Competitions
         </a> 
    </li> 
</ul>

<div id="mason">
    <div class="mas architecture-competitions"><p>Arch</p></div>
    <div class="mas  architecture-news"><p>Graph</p></div>
    <div class="mas graphic-news "><p>graph news</p></div>
    <div class="mas design-competitions "><p>dsgn-compet</p></div>
</div>

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid;
    padding: 3px;
    margin:10px 0;
}

.mas {
    border: 1px solid; 
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

.architecture-competitions  { background: red; }
.architecture-news { background: blue; }
.graphic-news  { background: green; }
.design-competitions  { background: yellow; }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    opacity:0;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-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;
    transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$('#mason').isotope({
    layoutMode: 'masonry',
    itemSelector: '.mas',
    masonry: {
        columnWidth: 200,
        cornerStampSelector: '#niowrapper'
    },
    animationEngine : 'jquery',
    animationOptions: {
        duration: 450,
        easing: 'swing',
        queue: false
    }
});
$(document).on('click', '#filters a', function() {
    var selector = $(this).attr('data-filter');
    $('#mason').isotope({ filter: selector });
});