JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="http://foundation.zurb.com/stylesheets/globals.css">
<link rel="stylesheet" href="http://foundation.zurb.com/stylesheets/grid.css">
<link rel="stylesheet" href="http://foundation.zurb.com/stylesheets/ui.css">
<div id="showcase">
<div class="container">
    <div class="row">
        <div class="three columns">
            <div class="row">
                <h3>Filter</h3>
                <ul id="filters">
                    <li><a href="#" data-filter="*">all</a></li>
                    <li><a href="#" data-filter=".one">one</a></li>
                    <li><a href="#" data-filter=".two">two</a></li>
                    <li><a href="#" data-filter=".three">three</a></li>
                </ul>
            </div>
        </div>
        <div class="nine columns">                    
            <div id="thumbnails">
                <ul class="block-grid three-up isosort">
                    <li class="thumb one">
                        <a class="viewproject" href="#" id="a6"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" alt="" /></a>
                        <h4>Title</h4>
                        <span>cat</span>
                    </li>
                    <li class="thumb two">
                        <a class="viewproject" href="#" id="a5"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" alt="" /></a>
                        <h4>Title</h4>
                        <span>cat</span>
                    </li>
                    <li class="thumb three one">
                        <a class="viewproject" href="#" id="a4"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" alt="" /></a>
                        <h4>Title</h4>
                        <span>cat</span>
                    </li>
                    <li class="thumb one two">
                        <a class="viewproject" href="#" id="a3"><img...

CSS

.nine .block-grid li{
    margin-bottom: 0;
}

#thumbnails .thumb {
    margin-bottom: 40px;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
    
#filters li{ 
    margin:0;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    }

/**** Isotope Filtering ****/

.isotope-item {
z-index: 2;
}

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}

/**** 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;
}

/* End: Recommended Isotope styles */

JavaScript

//Showcase
$('#showcase').animate({
    'opacity': 0
}, 0);
fadeInDivs(['#showcase']);

function fadeInDivs(els) {
    e = els.pop();
    $(e).delay(750).animate({
        'opacity': 1
    }, 1000, function() {
        if (els.length) fadeInDivs(els);
    });
};

$('#showcase').queue(function() {

    //fade in each filter
    $('#filters li').each(function(i, item) {
        setTimeout(function() {
            $(item).animate({
                'opacity': 1
            }, 1000);
        }, 50 * i);
    });

    //fade in each thumbnail
    $('.thumb').each(function(i, item) {
        setTimeout(function() {
            $(item).animate({
                'opacity': 1
            }, 1000);
        }, 500 * i);
    });
});