JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="https://raw.github.com/riklomas/quicksearch/master/jquery.quicksearch.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="filters">
    <div class="option-set" data-filter-group="color">
        <a href="#" data-filter-value="">All</a>
        <a href="#" data-filter-value=".red">Red</a>
        <a href="#" data-filter-value=".blue">Blue</a>
        <a href="#" data-filter-value=".green">Green</a>
        <a href="#" data-filter-value=".yellow">Yellow</a>
    </div>
    <div class="option-set" data-filter-group="size">
        <a href="#" data-filter-value="">All</a>
        <a href="#" data-filter-value=".small">Small</a>
        <a href="#" data-filter-value=".big">Big</a>
    </div>
    <div class="option-set" data-filter-group="search">
        <p>Search:</p>
        <input type="text" id="discussion-search">
    </div>     
</div>

<div id="container">
    <div class="item red small"><p>Red - small</p></div>
    <div class="item blue big"><p>Blue - big</p></div>
    <div class="item green small"><p>Green - small</p></div>
    <div class="item yellow big"><p>Yellow - big</p></div>
    <div class="item red big"><p>Red - big</p></div>
    <div class="item blue small"><p>Blue - small</p></div>
    <div class="item green big"><p>Green - big</p></div>
    <div class="item yellow big"><p>Yellow - big</p></div>
    <div class="item red small"><p>Red - small</p></div>
    <div class="item blue big"><p>Blue - big</p></div>
    <div class="item green small"><p>Green - small</p></div>
    <div class="item yellow big"><p>Yellow - big</p></div>
    <div class="item red big"><p>Red - big</p></div>
    <div class="item blue small"><p>Blue - small</p></div>
    <div class="item green big"><p>Green - big</p></div>
    <div class="item yellow small - small"><p>Yellow - small</p></div>
    <div class="item red big"><p>Red - big</p></div>
    <div class="item blue small - small"><p>Blue - big</p></div>
    <div...

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

#container {
    border: 1px solid;
    padding: 3px;
}

.item {  
    margin: 3px;
    float: left;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.yellow { background: yellow; }

.small {
      width: 70px;
    height: 70px;
}
.big {
    width: 70px;
    height:100px;
}

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

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

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function() {

    var $container = $('#container'),
        filters = {};

    $container.isotope({
        itemSelector: '.item'
    });

    // filter buttons
    $('#filters a').click(function() {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return;
        }
        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');
        // store filter value in object
        // i.e. filters.color = 'red'
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');
        $container.isotope({
            filter: selector
        });
        return false;
    });


    $('input#discussion-search').quicksearch('#container .item', {
        'show': function() {
            $(this).addClass('quicksearch-match');
        },
        'hide': function() {
            $(this).removeClass('quicksearch-match');
        }
    }).keyup(function() {
        setTimeout(function() {
            $container.isotope({
                filter: '.quicksearch-match'
            }).isotope();
        }, 100);
    });

});