JSFiddle - React, Tailwind, and code Playground

HTML

<div id="blog" class="container section dark">
    <div id="board" class="row">
        <div id="streamwrapper">
            <div id="stream">
                <article id="509" class="post-509 post type-post status-publish format-chat hentry category-photographie category-portrait big photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/eve-et-son-cafe"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120312-0060-570x570.jpg" alt="" /></a>
                </article>
                <article id="514" class="post-514 post type-post status-publish format-image hentry category-corporatif category-photographie category-portrait small photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/olivier-m-2"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120717-_GAB2249-Edit-copy-e1348195892766.jpg" alt="" /></a>
                </article>
                <article id="506" class="post-506 post type-post status-publish format-image hentry category-photographie category-portrait small photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/valene-t-2"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120417-00751-270x270.jpg" alt="" /></a>
                </article>
                <article id="469" class="post-469 post type-post status-publish format-chat hentry category-photographie category-portrait big photo">
                    <a class="ajaxed" href="http://www.gablabelle.com/karine-et-les-feuilles"><img data-src="http://www.gablabelle.com/wp-content/themes/gablabelle/images/transparent.gif" src="http://www.gablabelle.com/wp-content/uploads/gablabelle-20120412-0073-570x570.jpg"...

CSS

html {
    overflow-x: hidden;
    overflow-y: scroll;
}
body {
    background: #161616;
    padding: 0;
}
.dark {
    background: #161616;
}
/**** Posts ****/
article.post {
    position: relative;
    color: white !important;
    float: left;
    display: block;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
/**** Media queries ****/
@media (max-width: 767px) {
    article.post {
        margin: 0 0 1px !important;
    }
    article.small img,
    article.articles img,
    article.long img,
    article.tall img ,
    article.big img {
        width: 100%;
        border-left: solid 1px #161616;
        border-right: solid 1px #161616;
    }
    article.small,
    article.articles,
    article.long,
    article.tall,
    article.big {
        width: 50%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    article.post {
        margin: 0 0 20px 20px !important;
    }
    article.small,
    article.small img,
    article.articles,
    article.articles img {
        width: 166px;
        height: 166px;
    }
    article.long,
    article.long img {
        width: 352px;
        height: 166px;
    }
    article.tall,
    article.tall img {
        width: 166px;
        height: 352px;
    }
    article.big,
    article.big img {
        width: 352px;
        height: 352px;
    }
}
@media (min-width: 980px) and (max-width: 1199px) {
    article.post {
        margin: 0 0 20px 20px !important;
    }
    article.small,
    article.small img,
    article.articles,
    article.articles img {
        width: 220px;
        height: 220px;
    }
    article.long,
    article.long img {
        width: 460px;
        height: 220px;
    }
    article.tall,
    article.tall img {
        width: 220px;
        height: 460px;
    }
    article.big,
    article.big img {
        width: 460px;
        height: 460px;
    }
}
@media (min-width: 1200px) {
    article.post {
        margin: 0 0 30px 30px !important;
    }
   ...

JavaScript

/**
 * Isotope v1.5.19
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2012 David DeSandro / Metafizzy
 */
(function(a,b,c){"use strict";var d=a.document,e=a.Modernizr,f=function(a){return a.charAt(0).toUpperCase()+a.slice(1)},g="Moz Webkit O Ms".split(" "),h=function(a){var b=d.documentElement.style,c;if(typeof b[a]=="string")return a;a=f(a);for(var e=0,h=g.length;e<h;e++){c=g[e]+a;if(typeof b[c]=="string")return c}},i=h("transform"),j=h("transitionProperty"),k={csstransforms:function(){return!!i},csstransforms3d:function(){var a=!!h("perspective");if(a){var c=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d="@media ("+c.join("transform-3d),(")+"modernizr)",e=b("<style>"+d+"{#modernizr{height:3px}}"+"</style>").appendTo("head"),f=b('<div id="modernizr" />').appendTo("html");a=f.height()===3,f.remove(),e.remove()}return a},csstransitions:function(){return!!j}},l;if(e)for(l in k)e.hasOwnProperty(l)||e.addTest(l,k[l]);else{e=a.Modernizr={_version:"1.6ish: miniModernizr for Isotope"};var m=" ",n;for(l in k)n=k[l](),e[l]=n,m+=" "+(n?"":"no-")+l;b("html").addClass(m)}if(e.csstransforms){var o=e.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},p=function(a,c,d){var e=b.data(a,"isoTransform")||{},f={},g,h={},j;f[c]=d,b.extend(e,f);for(g in e)j=e[g],h[g]=o[g](j);var k=h.translate||"",l=h.scale||"",m=k+l;b.data(a,"isoTransform",e),a.style[i]=m};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){p(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return...