JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.isotope.min.js"></script>
<div id="left">
    <ul id="menu">
        <li><a href="#" data-filter="*">show all</a>

        </li>
        <li><a href="#" data-filter=".green">Pink</a>

        </li>
        <li><a href="#" data-filter=".blue">Blue</a>

        </li>
        <li><a href="#" data-filter=".yellow">Yellow</a>

        </li>
    </ul>
</div>
<div id="middle">Middle Middle Middle Middle</div>
<div id="right">
    <div class="thumbs yellow"></div>
    <div class="thumbs long blue"></div>
    <div class="thumbs green"></div>
    <div class="thumbs yellow"></div>
    <div class="thumbs blue"></div>
    <div class="thumbs long green"></div>
    <div class="thumbs yellow"></div>
    <div class="thumbs blue"></div>
</div>

CSS

body {
    padding:0;
    margin:0;
    width:100%;
    font-family:helvetica;
    color:black;
    font-size:12px;
    letter-spacing:0.2em;
}
html {
    overflow-y: scroll;
}
#left {
    position:fixed;
    top:0;
    left:0;
    width:170px;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border:20px solid white;
    background:blue;
}
#middle {
    float:left;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-top:20px solid white;
    border-bottom:20px solid white;
    border-right:10px solid white;
    height:100%;
    background:orange;
}
#right {
    float:right;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-right:20px solid white;
    border-top:20px solid white;
    border-left:10px solid white;
    background:orange;
}
.thumbs {
    box-sizing:border-box;
    border-right:10px solid red;
    float:left;
    background:red!important;
    width:25%;
    padding-bottom:10%;
    margin-bottom:10px;
}
.long {
    padding-bottom:30%;
}
.green {
    background:green!important;
}
.blue {
    background:blue!important;
}
.yellow {
    background:yellow!important;
}
ul#menu {
    list-style:none;
}
ISOTOPE CONTENT ------------------ */ .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
   ...

JavaScript

$(document).ready(function () {

    $('#menu a').click(function () {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });

    var $container = $('#right');
        $container.isotope({
        layoutMode: 'fitRows',
        itemSelector: '.thumbs',
        animationEngine: 'best-available',
        resizable: false

    });

    $(window).smartresize(function () {
        if ($(window).width() < 768) {
            $container.isotope({
                columns: 1
            });
        }
        if ($(window).width() > 768) {
            $container.isotope({
                columns: 4
            });
        }
    });
});