JSFiddle - React, Tailwind, and code Playground

by glebcha

HTML

<div id="container">
    <div class="lower">
        <div class="box size33">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

           <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

           <p>Some text</p>

        </div>
        <div class="box size22">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
        <div class="box size11">
            	<h1>Back</h1>

           <p>Some text</p>

        </div>
             <div class="box size11">
            	<h1>Back</h1>

           <p>Some text</p>

        </div>
            <div class="box size11">
            	<h1>Back</h1>

           <p>Some text</p>

        </div>
                <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
                    <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
                        <div class="box size11">
            	<h1>Back</h1>

            <p>Some text</p>

        </div>
    </div>
    <div class="upper">
        	<h1>Front</h1>

        <p>Some text</p>

    </div>
</div>

CSS

#container {
    position:relative;
    height:300px;
    width:300px;
    margin:20px auto;
}
#container > div {
    position:absolute;
    left:0;
    top:0;
    width:300px;
    height:300px !important;
    padding:10px;
    background:#3C404B;
    overflow: auto;
    -webkit-transition:1.5s ease-in-out;
    -moz-transition:1.5s ease-in-out;
    transition:1.5s ease-in-out;
}
#container > div.lower {
    background:#000;
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(180deg);
    -webkit-transform:perspective(800px) rotateY(180deg);
    transform:perspective(800px) rotateY(180deg);
}
#container > div h1 {
    font-size:20px;
    padding:0;
    margin:0;
    color:#fff;
    line-height:40px;
}
#container > div p {
    font-size:11px;
    padding:0;
    margin:0;
    color:#eee;
    line-height:20px;
}
#container > div a {
    color:#ff0;
}
#container > div.upper {
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(0deg);
    -webkit-transform:perspective(800px) rotateY(0deg);
    transform:perspective(800px) rotateY(0deg);
}
#container:hover > div.lower {
    -moz-transform:perspective(800px) rotateY(0);
    -webkit-transform:perspective(800px) rotateY(0);
    transform:perspective(800px) rotateY(0);
}
#container:hover > div.upper {
    -webkit-transform:perspective(800px) rotateY(-179.9deg);
    -moz-transform:perspective(800px) rotateY(-179.9deg);
    transform:perspective(800px) rotateY(-179.9deg);
}
.box {
    background: green;
    overflow: hidden;
}

JavaScript

/*
 * jQuery Nested v1.03
 *
 * For a (total) gap free, multi column, grid layout experience.
 * http://suprb.com/apps/nested/
 * By Andreas Pihlström and additional brain activity by Jonas Blomdin
 *
 * Licensed under the MIT license.
 */

// Debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
// Copy pasted from http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

(function ($, sr) {
    var debounce = function (func, threshold, execAsap) {
        var timeout;
        return function debounced() {
            var obj = this,
                args = arguments;

            function delayed() {
                if (!execAsap) func.apply(obj, args);
                timeout = null;
            };
            if (timeout) clearTimeout(timeout);
            else if (execAsap) func.apply(obj, args);

            timeout = setTimeout(delayed, threshold || 150);
        };
    };
    jQuery.fn[sr] = function (fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };

})(jQuery, 'smartresize');

// Simple count object properties

if (!Object.keys) {
    Object.keys = function (obj) {
        var keys = [],
            k;
        for (k in obj) {
            if (Object.prototype.hasOwnProperty.call(obj, k)) {
                keys.push(k);
            }
        }
        return keys;
    };
}

// The Nested magic

(function ($) {

    $.Nested = function (options, element) {
        this.element = $(element);
        this._init(options);
    };

    $.Nested.settings = {
        selector: '.box',
        minWidth: 50,
        minColumns: 1,
        gutter: 1,
        centered: false,
        resizeToFit: true, // will resize block bigger than the gap
        resizeToFitOptions: {
            resizeAny: true // will resize any block to fit the gap         
        },
        animate: true,
        animationOptions: {
            speed: 20,
            duration: 100,
 ...