JSFiddle - React, Tailwind, and code Playground

by tommaitland

HTML

<nav>
    <a href="#" data-filter="green">Green</a>
    <a href="#" data-filter="blue">Blue</a>
    <a href="#" data-filter="red">Red</a>
    <a href="#" data-filter="yellow">Yellow</a>
</nav>
<section id="filter">
    <div class="block" style="background: green" data-filter-tags="green"></div>
    <div class="block" style="background: blue" data-filter-tags="blue"></div>
    <div class="block" style="background: red" data-filter-tags="red"></div>
    <div class="block" style="background: yellow" data-filter-tags="yellow"></div>
    <div class="block" style="background: orange" data-filter-tags="yellow,red"></div>
    <div class="block" style="background: purple" data-filter-tags="blue,red"></div>
    <div class="block" style="background: cyan" data-filter-tags="blue,green"></div>
    <div class="block" style="background: black" data-filter-tags="green,blue,red,yellow"></div>
    <div class="block" style="background: magenta" data-filter-tags="red,blue"></div>
</section>

CSS

body {
    font-family: sans-serif;
    text-align: center;
}
nav {
    background: #eee;
    padding: 10px 0;
    margin: 0 0 20px;
}
nav a {
    background: #ccc;
    padding: 5px;
    display: inline-block;
    text-decoration: none;
    color: black;
}
nav a.selected {
    background: white;
}
.block {
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
}

JavaScript

/**
 * Filter.js is a jQuery plugin that enables simple element filtering based on terms.
 * The functionality is similar to isotope, but without layouts and very bare bones.
 *
 * @name filter.js
 * @version 1.0.0
 * @requires jQuery v1.9.2+
 * @author Tom Maitland
 * @license Apache v2 License
 *
 * For docs, visit:
 * https://github.com/tommaitland/filter.js
 *
 * Copyright (c) 2013, Tom Maitland
 */

(function ($) {

    "use strict";
 
    $.fn.filter = function (options) {
 
        var defaults = {
            nav: '[data-filter]' //
        }

        var $this = this,
            settings = $.extend(defaults, options),
            $target = $(settings.target),
            selected = [];

        return this.each( function() {
            
            var $element = $(this);

            $(settings.nav).each( function() {

                $(this).click( function(event) {

                    // add selected class
                    $(this).toggleClass('selected');

                    // manipulate selected terms array
                    if ($.inArray($(this).data('filter'), selected) < 0) {
                        selected.push($(this).data('filter'));
                    } else {
                        var index = $.inArray($(this).data('filter'), selected);
                        selected.splice(index, 1);
                    }
                                        
                    // show/hide elements
                    $element.find('[data-filter-tags]').each( function() {

                        var terms = $(this).data('filter-tags').split(','),
                            show = null;
                        
                        for (var i=0;i<selected.length;i++) {
                            //show = ($.inArray(selected[i], terms) >= 0 && show !== false);
                            show = ($.inArray(selected[i], terms >= 0) && show !== false);
                        }

                        if (show || selected.length == 0)...