JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filter">
    <li><a href="#">all</a></li>
    <li><a href="#">john</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">haha</a></li>
    <li><a href="#">doe</a></li>
</ul>
<ul id="boxes">
    <li data-type="john">1</li>
    <li data-type="haha">2</li>
    <li data-type="john">3</li>
    <li data-type="test">4</li>
    <li data-type="doe">5</li>
    <li data-type="test">6</li>
    <li data-type="test">7</li>
    <li data-type="doe">8</li>
    <li data-type="john">9</li>
    <li data-type="doe">10</li>
    <li data-type="test">11</li>
    <li data-type="doe">12</li>
</ul>

CSS

#filter {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    overflow: hidden;
}
#filter li {
    margin: 0 5px 0 0;
    float: left;
}
#boxes {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 325px;
    overflow: hidden;
}
#boxes li {
    float: left;
    width: 60px;
    height: 60px;
    margin: 0 5px 5px 0;
    border: 1px solid #d2d2d2;
}

JavaScript

$(function() {
    $("#filter a").click(function() {
        var $this = $(this),
                $oriColl = $("#boxes"),
                $clonedColl = $oriColl.clone(),
                filtered = ($this.text() == "all") ? $("#boxes li") : $("#boxes li[data-type=" + $this.text() + "]");

        $("#boxes").quicksand(filtered, { duration: 800, easing: 'easeInOutQuad' });
    });
});