JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="filters">
    <div class="a-z-search-wrapper">
        <label for="a-z-search">Search A-Z by name</label>    
        <input class="a-z-search" id="a-z-search" type="text" placeholder="Type here to auto search..." />
    </div>
    <form class="alpha">
        <input type="radio" name="fl-alpha" value="all" id="all" /><label for="all">ALL</label>
        <input type="radio" name="fl-alpha" value="a" id="a" /><label for="a">A</label>
        <input type="radio" name="fl-alpha" value="b" id="b" /><label for="b">B</label>
        <input type="radio" name="fl-alpha" value="c" id="c" /><label for="c">C</label>
        <input type="radio" name="fl-alpha" value="d" id="d" /><label for="d">D</label>
        <input type="radio" name="fl-alpha" value="e" id="e" /><label for="e">E</label>
        <input type="radio" name="fl-alpha" value="f" id="f" /><label for="f">F</label>
        <input type="radio" name="fl-alpha" value="g" id="g" /><label for="g">G</label>
        <input type="radio" name="fl-alpha" value="h" id="h" /><label for="h">H</label>
        <input type="radio" name="fl-alpha" value="i" id="i" /><label for="i">I</label>
        <input type="radio" name="fl-alpha" value="j" id="j" /><label for="j">J</label>
        <input type="radio" name="fl-alpha" value="k" id="k" /><label for="k">K</label>
        <input type="radio" name="fl-alpha" value="l" id="l" /><label for="l">L</label>
        <input type="radio" name="fl-alpha" value="m" id="m" /><label for="m">M</label>
        <input type="radio" name="fl-alpha" value="n" id="n" /><label for="n">N</label>
        <input type="radio" name="fl-alpha" value="o" id="o" /><label for="o">O</label>
        <input type="radio" name="fl-alpha" value="p" id="p" /><label for="p">P</label>
        <input type="radio" name="fl-alpha" value="q" id="q" /><label for="q">Q</label>
        <input type="radio" name="fl-alpha" value="r" id="r" /><label for="r">R</label>
        <input type="radio" name="fl-alpha"...

CSS

body {
    display: block;
    margin: 0 auto;
    max-width: 1020px;
    font-family: 'Arial';
    color: #646464;
}

.filters {
    position: relative; 
    margin: 0;
    background: #eee;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 68%, rgba(238,238,238,1) 95%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(68%,rgba(255,255,255,1)), color-stop(95%,rgba(238,238,238,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: url('http://stage.denison.edu/sites/all/themes/denison/images/background_calendar_header_shadow.png') no-repeat center bottom;
    overflow: visible;
}

.a-z-search-wrapper {
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 20px 0 30px;
    background: #000;
}

.a-z-search-wrapper label {
    display: none;
}

input[type=text].a-z-search {
    display: block;
    margin: 0 auto;
    width: 75%; 
    max-width: 700px;
    padding: 15px 50px 30px 20px;
    background: transparent url('https://cdn.denison.edu/sites/all/themes/denison/images/icon_search_large_atoz.png') no-repeat right 15px;
    color: #fff;
    font-family: 'Didot W01 Italic', serif;
    font-size: 1.6em;
    font-weight: 100;
    text-align: center;
    text-transform: uppercase;
    border: 0;
    outline: none;
}
    input[type=text].a-z-search::-webkit-input-placeholder { color: #777; }
    input[type=text].a-z-search:-moz-placeholder { /* Firefox 18- */ color: #777;  }
    input[type=text].a-z-search::-moz-placeholder {  /* Firefox 19+ */ color: #777; }
    input[type=text].a-z-search:-ms-input-placeholder { /* IE */color: #777; }

.alpha {
    width: 100%;
    margin: 20px 0 0;
   ...

JavaScript

var byAlpha = [],
    byCat = [],
    byLocation = [];

$('input[name=fl-alpha]').on('change', function() {
    if (this.checked) byAlpha.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byAlpha, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name=fl-cat]').on('change', function() {
    if (this.checked) byCat.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byCat, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name=fl-cont]').on('change', function() {
    if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
    else removeA(byLocation, "[data-category~='" + $(this).attr("value") + "']");
});

$('input[name^=fl]').on('change', function() {
    var str = 'Include items \n';
    var selector = '',
        cselector = '',
        nselector = '';

    var $results = $('.view-content > .views-row'),
        $checked = $(':checkbox[name^=fl]');

    if ($checked.length) {
        if (byAlpha.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byAlpha.join(',') + ")\n";
                $($('input[name=fl-alpha]:checked')).each( function(index, byAlpha) {
                    if (selector === '') {
                        selector += "[data-category~='" + byAlpha.id + "']";
                    } else {
                        selector += ",[data-category~='" + byAlpha.id + "']";
                    }
                });
            } else {
                str += "    AND " + "with (" + byAlpha.join(' OR ') + ")\n";
                $($('input[name=fl-alpha]:checked')).each( function(index, byAlpha) {
                    selector += "[data-category~='" + byAlpha.id + "']";
                });
            }
        }

        if (byCat.length) {
            if (str == "Include items \n") {
                str += "    " + "with (" + byCat.join(' OR ') + ")\n";
               ...