JSFiddle - React, Tailwind, and code Playground

by drawcard

HTML

<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-cells-by-column/cells-by-column.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-cells-by-row/cells-by-row.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-fit-columns/fit-columns.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-horizontal/horizontal.js"></script>
<script src="http://isotope.metafizzy.co/beta/bower_components/isotope-masonry-horizontal/masonry-horizontal.js"></script>
<h1>Isotope - masonry element sizing columnWidth</h1>

<div class="container">
  <div class="grid-sizer"></div>
    <div class="item">
        <img src="http://lorempixel.com/512/512/cats/1" />
        <div class="contents">
            <h2>1</h2>
        </div>
    </div>
        <div class="item big">
            <img src="http://lorempixel.com/512/512/cats/2" />
        <div class="contents">
            <h2>2</h2>
        </div>
    </div>
        <div class="item">
            <img src="http://lorempixel.com/512/512/cats/3" />
        <div class="contents">
            <h2>3</h2>
        </div>
    </div>
        <div class="item">
            <img src="http://lorempixel.com/512/512/cats/4" />
        <div class="contents">
            <h2>4</h2>
        </div>
    </div>
        <div class="item">
            <img src="http://lorempixel.com/512/512/cats/5" />
        <div class="contents">
            <h2>5</h2>
        </div>
    </div>
        <div class="item big">
            <img src="http://lorempixel.com/512/512/cats/6" />
        <div class="contents">
            <h2>6</h2>
        </div>
    </div>
        <div class="item big">
            <img src="http://lorempixel.com/512/512/cats/7" />
        <div class="contents">
            <h2>7</h2>
        </div>
    </div>
        <div class="item">
            <img...

CSS

.container { margin-top: 2em; margin-bottom: 2em; width: 100%; /*background-color:#ff9900;*/}

/* clear fix */ 
.container:after { content: ''; display: block; clear: both; }

.item, .grid-sizer { width: 50%; height:0; padding-bottom:50%; opacity:0.6 position:relative; box-sizing:border-box;}
.item img {max-width:100%;height:auto;position:absolute;top:0;right:0;bottom:0;left:0;}
.big {width:100%; height:0; padding-bottom:100%;}
.item:before{content:'';padding-top:50%;display:block;}
.item .contents{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0.6; padding:20px;}

/*styling items so we can see them in demo*/
.item:nth-child(odd) .contents{background-color:#ccc}
.item:nth-child(even) .contents{background-color:#aaa}

@media (min-width: 480px) { 
    .grid-sizer, .item {width: 25%; height: 0; padding-bottom:25%;}   
    .big {width: 50%; height: 0; padding-bottom:50%;}   
}

@media (min-width: 768px) { 
    .grid-sizer, .item {width: 12.5%; height: 0; padding-bottom:12.5%;} 
    .big {width: 25%; height: 0; padding-bottom:25%;}   
}

JavaScript

// external js:
// http://isotope.metafizzy.co/beta/isotope.pkgd.js

//packery js (no need to copy this over if you have it included)
/*!
 * Packery layout mode PACKAGED v1.1.0
 * sub-classes Packery
 * http://packery.metafizzy.co
 */

!function(a){function b(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}function c(a,b){var c=d(a,b)?f:e;c(a,b)}var d,e,f;"classList"in document.documentElement?(d=function(a,b){return a.classList.contains(b)},e=function(a,b){a.classList.add(b)},f=function(a,b){a.classList.remove(b)}):(d=function(a,c){return b(c).test(a.className)},e=function(a,b){d(a,b)||(a.className=a.className+" "+b)},f=function(a,c){a.className=a.className.replace(b(c)," ")});var g={hasClass:d,addClass:e,removeClass:f,toggleClass:c,has:d,add:e,remove:f,toggle:c};"function"==typeof define&&define.amd?define("classie/classie",g):"object"==typeof exports?module.exports=g:a.classie=g}(window),function(a){function b(){function a(b){for(var c in a.defaults)this[c]=a.defaults[c];for(c in b)this[c]=b[c]}return c.Rect=a,a.defaults={x:0,y:0,width:0,height:0},a.prototype.contains=function(a){var b=a.width||0,c=a.height||0;return this.x<=a.x&&this.y<=a.y&&this.x+this.width>=a.x+b&&this.y+this.height>=a.y+c},a.prototype.overlaps=function(a){var b=this.x+this.width,c=this.y+this.height,d=a.x+a.width,e=a.y+a.height;return this.x<d&&b>a.x&&this.y<e&&c>a.y},a.prototype.getMaximalFreeRects=function(b){if(!this.overlaps(b))return!1;var c,d=[],e=this.x+this.width,f=this.y+this.height,g=b.x+b.width,h=b.y+b.height;return this.y<b.y&&(c=new a({x:this.x,y:this.y,width:this.width,height:b.y-this.y}),d.push(c)),e>g&&(c=new a({x:g,y:this.y,width:e-g,height:this.height}),d.push(c)),f>h&&(c=new a({x:this.x,y:h,width:this.width,height:f-h}),d.push(c)),this.x<b.x&&(c=new a({x:this.x,y:this.y,width:b.x-this.x,height:this.height}),d.push(c)),d},a.prototype.canFit=function(a){return this.width>=a.width&&this.height>=a.height},a}var c=a.Packery=function(){};"function"==typeof...