JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="jquery.quicksearch.js"></script>
<!doctype html public "✰">

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]-->

<!--[if IE 7]> <html lang="en-us" class="no-js ie7"> <![endif]-->

<!--[if IE 8]> <html lang="en-us" class="no-js ie8"> <![endif]-->

<!--[if IE 9]> <html lang="en-us" class="no-js ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

<head>

<meta charset="utf-8">



<title>Adminica | The Professional Admin Theme</title>



<meta name="description" content="http://themeforest.net/item/adminica-the-professional-admin-template/160638">

<meta name="author" content="Oisin Lavery - Tricycle Labs">



<!-- iPhone, iPad and Android specific settings -->



<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />



<link href="http://templates.tricyclelabs.com/adminica/images/interface/iOS_icon.png" rel="apple-touch-icon">



<!-- Styles -->



<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/styles/adminica/reset.css">

<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/http://fonts.googleapis.com/css?family=Open+Sans:400,700">





<!-- NOTE: The following css files have been combined and minified into plugins.css



<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/styles/plugins/colorpicker/colorpicker.css">

<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/styles/plugins/datatables/datatables.css">

<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/styles/plugins/elfinder/elfinder.css">

<link rel="stylesheet" href="http://templates.tricyclelabs.com/adminica/styles/plugins/fancybox/fancybox.css">

<link rel="stylesheet"...

JavaScript

if ($.fn.isotope) {
    $(".isotope_holder ul").isotope({
        animationEngine: "best-available",
        animationEngine: "jquery",
        sortBy: "sort_1",
        filter: "*",
        getSortData: {
            sort_1: function($elem) {
                return $elem.find('.sort_1').text();
            },
            sort_2: function($elem) {
                return $elem.find('.sort_2').text();
            },
            sort_3: function($elem) {
                return $elem.find('.sort_3').text();
            },
            sort_4: function($elem) {
                return $elem.find('.sort_4').text();
            }
            // add more if you need more sort types
        }
    });

    $(".isotope_filter").on('click', function() {
        var x = $(this).attr("data-isotope-filter");
        $(".isotope_holder ul").isotope({
            filter: x
        });

        return false;
    });

    $(".isotope_sort").on('click', function() {
        var y = $(this).attr("data-isotope-sort");

        $(".isotope_holder ul").isotope({
            sortBy: y
        });

        return false;
    });

    $(".isotope_filter_complex").on("click", function() {
        $(".isotope_filter_complex").removeClass("complex_current");
        $(".isotope_filter_complex:checked").addClass("complex_current");

        var checked = "";

        $(".complex_current").each(function() {
            checked = checked + "" + $(this).attr("data-isotope-filter");
        });
        $(".isotope_holder ul").isotope({
            filter: checked
        });

        if (checked == "**") {
            $(".isotope_holder ul").isotope({
                filter: "*"
            });
        }

    });

    $('#gallery-search').quicksearch('.isotope_holder li', {
        'show': function() {
            $(this).addClass('quicksearch-match');
        },
        'hide': function() {
            $(this).removeClass('quicksearch-match');
        },
        'testQuery': function(query, txt,...