JSFiddle - React, Tailwind, and code Playground

by brigi

HTML

<div id="container">
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
</div>

CSS

#container {
 width: 250px;   
   margin: 0 auto; 
}

.tile-holder {
  width: 50px;
  height: 50px;
  background: red;
  margin: 1px;
  float: left;
}

.tile-holder.big {
  width: 204px;
  height: 100px;
}

.tile {
  width: 50px;
  height: 50px;
  background: blue;
  opacity: 0.5;
}

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

JavaScript

/**
 * Isotope v1.0.110220 - always sortable mod
 * An exquisite jQuery plugin for magical layouts
 * http://isotope.metafizzy.co
 *
 * Commercial use requires one-time license fee
 * http://metafizzy.co/#licenses
 *
 * Copyright 2011 David DeSandro / Metafizzy
 */

(function( window, $, undefined ){

  // ========================= getStyleProperty by kangax ===============================
  // http://perfectionkills.com/feature-testing-css-properties/

  var getStyleProperty = (function(){

    var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
    var _cache = { };

    function getStyleProperty(propName, element) {
      element = element || document.documentElement;
      var style = element.style,
          prefixed,
          uPropName,
          i, l;

      // check cache only when no element is given
      if (arguments.length === 1 && typeof _cache[propName] === 'string') {
        return _cache[propName];
      }
      // test standard property first
      if (typeof style[propName] === 'string') {
        return (_cache[propName] = propName);
      }
    
      // capitalize
      uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);

      // test vendor specific properties
      for (i=0, l=prefixes.length; i<l; i++) {
        prefixed = prefixes[i] + uPropName;
        if (typeof style[prefixed] === 'string') {
          return (_cache[propName] = prefixed);
        }
      }
    }

    return getStyleProperty;
  }());

  // ========================= miniModernizr ===============================
  // <3<3<3 and thanks to Faruk and Paul for doing the heavy lifting

  /*!
   * Modernizr v1.6ish: miniModernizr for Isotope
   * http://www.modernizr.com
   *
   * Developed by: 
   * - Faruk Ates  http://farukat.es/
   * - Paul Irish  http://paulirish.com/
   *
   * Copyright (c) 2009-2010
   * Dual-licensed under the BSD or MIT licenses.
   * http://www.modernizr.com/license/
   */

 
  /*
   * This version whittles down the script just...