JSFiddle - React, Tailwind, and code Playground

by Harsh Kansagara

HTML

<!-- DEMO 1-->
<ul class="demo1-filter">
	<li>
		<a href="javascript:;" data-filter="1">FILTER 1</a>
	</li>
	<li>
		<a href="javascript:;" data-filter="2">FILTER 2</a>
		</li>
</ul>

<div class="demo1">
	<div class="filtr-item" data-category="1">
		Hello
	</div>
	<div class="filtr-item" data-category="1">
		Hi
	</div>
	<div class="filtr-item" data-category="2">
		How Are You
	</div>
	<div class="filtr-item" data-category="2">
		I'm fine
	</div>
</div>

<!-- DEMO2-->
<div class="demo2">
	<div class="filtr-item" data-category="1">
		Hello
	</div>
	<div class="filtr-item" data-category="1">
		Hi
	</div>
	<div class="filtr-item" data-category="2">
		How Are You
	</div>
	<div class="filtr-item" data-category="2">
		I'm fine
	</div>
</div>

SCSS

.demo1{
	background:tomato;
	margin:10px;
	.filtr-item{
		width:25%
	}
}

.demo2{
	background:skyblue;
	margin:10px;
	.filtr-item{
		width:25%
	}
}

JavaScript

/**
* Filterizr is a jQuery plugin that sorts, shuffles and applies stunning filters over
* responsive galleries using CSS3 transitions and custom CSS effects.
*
* @author Yiotis Kaltsikis
* @see {@link http://yiotis.net/filterizr}
* @version 1.2.1
* @license MIT License
*/

(function(global, $) {

    'use strict';

    //Make sure jQuery exists
    if (!$) throw new Error('Filterizr requires jQuery to work.');

    /**
    * Modified version of Jake Gordon's Bin Packing algorithm used for Filterizr's 'packed' layout
    * @see {@link https://github.com/jakesgordon/bin-packing}
    */
    var Packer = function(w) {
        this.init(w);
    };

    Packer.prototype = {
        init: function(w) {
            this.root = { x: 0, y: 0, w: w };
        },
        fit: function(blocks) {
            var n, node, block, len = blocks.length;
            var h = len > 0 ? blocks[0].h : 0;
            this.root.h = h;
            for (n = 0; n < len ; n++) {
                block = blocks[n];
                if ((node = this.findNode(this.root, block.w, block.h)))
                block.fit = this.splitNode(node, block.w, block.h);
                else
                block.fit = this.growDown(block.w, block.h);
            }
        },
        findNode: function(root, w, h) {
            if (root.used)
            return this.findNode(root.right, w, h) || this.findNode(root.down, w, h);
            else if ((w <= root.w) && (h <= root.h))
            return root;
            else
            return null;
        },
        splitNode: function(node, w, h) {
            node.used = true;
            node.down  = { x: node.x,     y: node.y + h, w: node.w,     h: node.h - h };
            node.right = { x: node.x + w, y: node.y,     w: node.w - w, h: h          };
            return node;
        },
        growDown: function(w, h) {
            var node;
            this.root = {
                used: true,
                x: 0,
                y: 0,
                w:...