JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<div class="Collage effect-parent"><img src="http://placehold.it/350x150/69D2E7/ffffff"><img src="http://placehold.it/320x180/A7DBD8/ffffff"><img src="http://placehold.it/320x300/E0E4CC/ffffff"><img src="http://placehold.it/472x500/F38630/ffffff"><img src="http://placehold.it/540x360/FA6900/ffffff"><img src="http://placehold.it/800x600/ECD078/ffffff"><img src="http://placehold.it/400x120/D95B43/ffffff"><img src="http://placehold.it/300x300/C02942/ffffff"><img src="http://placehold.it/320x500/542437/ffffff"><img src="http://placehold.it/450x300/53777A/ffffff"></div>
    
<p class="footnote"><a href="http://ed-lea.github.io/jquery-collagePlus/">CollagePlus</a> for jQuery by <a href="http://twitter.com/ed_lea">@ed_lea</a></p>

CSS

body{
    background-color:#F1F1F1;
}
.Collage img{
    opacity:0;
    box-shadow:0px 3px 4px #dcdcdc;
    border-radius: 6px;
    /* 
    * Change this to try different borders
    */
    border:6px solid #FFF;
}
 .Collage{
    /* 
     * Change this to set the spacing of the images in the grid
     */
    padding:10px;
  }

 .footnote{
    font-family:arial;
    color:#999;
    padding:10px;
    font-size:12px;
 }
 .footnote a{
    color:#09f;
    text-decoration:none;
 }




/* from transitions.css */
/*

A library of transitions for revealing the loaded images
(Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

*/

.effect-parent {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
    }


/* EFFECT 1 */
.effect-1 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    -moz-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly ease-in-out forwards;
    -moz-animation: fly ease-in-out forwards;
    animation: fly ease-in-out forwards;
}
@-webkit-keyframes fly {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; }
}

@-moz-keyframes fly {
    100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; }
}

@keyframes fly {
    100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; }
}



/* EFFECT 2 */
.effect-2 {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp ease forwards;
    -moz-animation: moveUp ease forwards;
    animation: moveUp ease forwards;
}

@-webkit-keyframes moveUp {
    to { -webkit-transform:...

JavaScript

/*!
 *
 * jQuery collagePlus Plugin v0.3.0
 * https://github.com/ed-lea/jquery-collagePlus
 *
 * Copyright 2012, Ed Lea twitter.com/ed_lea
 *
 * built for http://qiip.me
 *
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/GPL-2.0
 *
 */
;(function(e){e.fn.collagePlus=function(t){function r(t,n,r,s){var o=r.padding*(t.length-1)+t.length*t[0][3],u=r.albumWidth-o,a=u/(n-o),f=o;for(var l=0;l<t.length;l++){var c=e(t[l][0]),h=Math.floor(t[l][1]*a),p=Math.floor(t[l][2]*a),d=!!(l<t.length-1);f+=h;if(!d&&f<r.albumWidth){h=h+(r.albumWidth-f)}if(c.is("img")){c.width(h)}else{c.width(h+t[l][3]);c.find("img").width(h)}if(c.is("img")){c.height(p)}else{c.height(p+t[l][4]);c.find("img").height(p)}i(c,d,r);if(r.effect=="default"){c.animate({opacity:"1"},{duration:r.fadeSpeed})}else{if(r.direction=="vertical"){var v=s<=10?s:10}else{var v=l<=9?l+1:10}c.addClass(r.effect);c.addClass("effect-duration-"+v)}}}function i(e,t,n){var r={"margin-bottom":n.padding+"px","margin-right":t?n.padding+"px":"0px",display:n.display,"vertical-align":"bottom",overflow:"hidden"};return e.css(r)}function s(t){$img=e(t);var n=new Array;n["w"]=parseFloat($img.css("border-left-width"))+parseFloat($img.css("border-right-width"));n["h"]=parseFloat($img.css("border-top-width"))+parseFloat($img.css("border-bottom-width"));return n}var n=e.extend({targetHeight:400,albumWidth:this.width(),padding:parseFloat(this.css("padding-left")),images:this.children(),fadeSpeed:"fast",display:"inline-block",effect:"default",direction:"vertical"},t);return this.each(function(){var t=0,i=[],o=1;n.images.each(function(u){var a=e(this),f=a.is("img")?a:e(this).find("img");var l=typeof f.data("width")!="undefined"?f.data("width"):f.width(),c=typeof f.data("height")!="undefined"?f.data("height"):f.height();var h=s(f);f.data("width",l);f.data("height",c);var...