JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://raw.github.com/riklomas/quicksearch/master/jquery.quicksearch.js"></script>
<div id="filters">
    <form>
        <p>Search:</p>
        <input type="text" id="discussion-search">
    </form>     
</div>

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

CSS

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

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

.item {
    width: 70px;
    height: 70px;
    margin: 3px;
    float: left;
}

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

/* Start: Recommended Isotope styles */

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

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

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
    opacity:0;
}

/**** 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');

   $container.isotope({
        itemSelector: '.item'
    });
    
    
    $('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 );
    });

});

//Bind this keypress function to all of the input tags
$("input").keypress(function (evt) {
//Deterime where our character code is coming from within the event
var charCode = evt.charCode || evt.keyCode;
if (charCode  == 13) { //Enter key's keycode
return false;
}
});