JSFiddle - React, Tailwind, and code Playground

by Vince Oveson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<body class="size-toggled">
    <div class="wrapper">
        <header class="header">
            <div class="container">
                <nav class="navbar navbar-default">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

                    </button>
                    <!-- /.navbar -->
                    <div class="navbar-collapse collapse" id="nav">
                        <ul class="nav navbar-nav wall-nav">
                            <li class="">	<a href="#" data-filter-value="A" data-filter-selector=".tile-letter">Filter A</a>

                            </li>
                            <li class="">	<a href="#" data-filter-value="B" data-filter-selector=".tile-letter">Filter B</a>

                            </li>
                            <li class="">	<a href="#" data-filter-value="C" data-filter-selector=".tile-letter">Filter C</a>

                            </li>
                            <li class="">	<a href="#" data-filter-value="D" data-filter-selector=".tile-letter">Filter D</a>

                            </li>
                            <li class="active">	<a href="#" data-filter-value="" data-filter-selector=".tile-letter">All</a>

                            </li>
                        </ul>
          ...

CSS

/* ==========================================================================
	#Base
========================================================================== */
 html, body {
    height: 100%;
}
body {
    min-width: 320px;
}
/* ==========================================================================
	#Containers
========================================================================== */
 .wrapper {
    position: relative;
    min-height: 100%;
}
/* ==========================================================================
	#Tiles
========================================================================== */
 .section-tiles {
    padding: 50px 0;
    overflow: hidden;
    margin: 0 -10px;
}
.tiles {
    overflow: hidden;
    -webkit-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
.tile {
    float: left;
    width: 16.66%;
    padding: 10px;
    background: #fff;
}
.tile-inner {
    position: relative;
    height: 0;
    padding-top: 100%;
    border: 1px solid #ccc;
}
.tile-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.tile-label {
    position: absolute;
    top: 10px;
    font-size: 25px;
    font-weight: bold;
}
.tile-label-right {
    right: 10px;
}
.tile-label-left {
    left: 10px;
}
.size-toggled .tile-toggle-medium {
    width: 33.33%;
}
.size-toggled .tile-toggle-large {
    width: 50%;
}
@media(max-width: 992px) {
    .tile {
        width: 25%;
    }
}
@media(max-width: 767px) {
    .tile {
        width: 33.33%;
    }
}
@media(max-width: 600px) {
    .tile {
        width: 50%;
    }
}
@media(max-width: 479px) {
    .tile {
        width: 100%;
    }
}

JavaScript

;(function ($) {
    $(document).ready(function () {
        var isotopeHolder = document.querySelector('.tiles');

        roundElementWidth(isotopeHolder, 12);

        var isotopeInstance = new Isotope(isotopeHolder, {
            masonry: {
                columnWidth: 1
            },
            getSortData: {
                letter: '.tile-letter',
                number: '.tile-number'
            },
            isResizeBound: false
        });
        $(window).on('resize', $.throttle(250, function () {
            roundElementWidth(isotopeHolder, 12);
            isotopeInstance.layout();
        }));
        $('.wall-nav').on('click', 'a', function (event) {
            event.preventDefault();


            var filterElement = this;
            var filterSelector = filterElement.getAttribute('data-filter-selector');
            var filterValue = filterElement.getAttribute('data-filter-value');

            isotopeInstance.arrange({
                filter: function (idx, itemElem) {
                    var text = itemElem.querySelector(filterSelector).innerText;

                    return text.match(filterValue);
                }
            });

            $(this).closest('li').addClass('active').siblings().removeClass('active');
        });

        $('.wall-sort').on('change', function () {
            isotopeInstance.arrange({
                sortBy: this.value
            });
        });

        $('.toggle-size').on('click', function () {
            $('body').toggleClass('size-toggled');

            isotopeInstance.layout();
        });

        $('.set-layout').on('click', function () {
            isotopeInstance.arrange({
                layoutMode: this.value
            });

            $(this).addClass('active').siblings().removeClass('active');

        });

    });

    function roundElementWidth(element, minSum) {
        element.style.width = 'auto';
        element.style.width = Math.ceil(element.clientWidth / minSum) * minSum +...