JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.2.0/mobile-detect.min.js"></script>
<div class="main-container white-bg">
    <!--begin filter-->
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="filterMenu" class="filter-menu">
        <div class="container">
            <div class="row">
                <div class="col-100 filter-col">
                    <div class="filter-head"> <span class="filter-toggle">
                            <span>Filter</span>
 <span class="toggle-icons">
                                <span class="hide-on-expand">+</span>
 <span class="show-on-expand">&times;</span>
</span>
                        </span>
                        <div class="filter-click-area" data-expandable-toggle="#filterMenu" data-expandable-close-on-click-outside="#filterMenu .container"></div>
                    </div>
                    <div class="filter-body">
                        <ul class="filter-section">
                            <li> <span class="text-medium">Service</span>

                                <div>

                                    <br/></br>
                                </div>
                                <div>
                                    
                                    
                                    <br/></br>
                                </div>
                                <div>
                                    <ul class="filter-section-options" data-selectable="filter">
                                        <li data-selectable-value="Customer Understanding"><span class="select-box">Customer Understanding</span>
                                        </li>
                                        <li data-selectable-value="Brand Valuation"><span class="select-box">Brand Valuation</span>
                            ...

CSS

.haas {
    font-family:'Neue Haas Grotesk W01 Disp', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-weight: 500;
}
.helvetica {
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.georgia {
    font-family: Georgia, serif;
    font-weight: 300;
}
.korean {
    font-family:'Open Sans', sans-serif;
}
.chinese {
    font-family:'Roboto', sans-serif;
}
.russian {
    font-family:"Courier New", Courier, monospace;
}
.transition-none {
    transition: none;
}
.clearfix {
    zoom: 1;
}
.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.hide {
    display: none !important;
}
.entypo-social {
    background: url(../img/social-icons.png) no-repeat;
    height: 20px;
    width: 20px;
}
.entypo-social.linkedin {
    background-position: -5px -5px;
}
.entypo-social-linkedin-red {
    background-position: -5px -30px;
}
.entypo-social.twitter {
    background-position: -30px -5px;
}
.entypo-social-twitter-red {
    background-position: -30px -30px;
}
.entypo-social.facebook {
    background-position: -55px -5px;
}
.entypo-social-facebook-red {
    background-position: -55px -30px;
}
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    width: 100%;
    font-family:'Neue Haas Grotesk W01 Disp', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
    font-weight: 500;
    background-color: #f7f7f7;
}
a {
    text-decoration: none;
    color: inherit;
}
div, ul, .box {
    box-sizing: border-box;
    position: relative;
}
button {
    background-color: #cccccc;
    border: none;
    padding: 20px 15px;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 300;
    color: #494545;
    letter-spacing: 0.6px;
    cursor: pointer;
}
button:hover {
   ...

JavaScript

//Main JS
//Written by @johnnytrinh
var bgbUtilities = (function () {

    function clickedOnContainer(evt, $target) {
        var objectOffset = $target.offset();

        return pointIsInBox({
            x: evt.pageX,
            y: evt.pageY
        }, {
            bottom: objectOffset.top + $target.height(),
            left: objectOffset.left,
            right: objectOffset.left + $target.width(),
            top: objectOffset.top
        });

        function pointIsInBox(point, box) {
            return (point.x >= box.left) && (point.x <= box.right) && (point.y >= box.top) && (point.y <= box.bottom);
        }

    }

    function arrayify(value) {
        if (typeof value === typeof[]) {
            return value;
        }

        return [value];
    }

    function getParmsFromURLHash(url) {
        var parms = {}, pieces, parts, i;
        var hash = url.lastIndexOf("#");
        if (hash !== -1) {
            // isolate just the hash value
            url = url.slice(hash + 1);
        }
        var question = url.indexOf("?");
        if (question !== -1) {
            url = url.slice(question + 1);
            pieces = url.split("&");
            for (i = 0; i < pieces.length; i++) {
                parts = pieces[i].split("=");
                if (parts.length < 2) {
                    parts.push("");
                }
                parms[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
            }
        }
        return parms;
    }

    function buildQueryFromObject(options) {
        var newHashArray = [];

        for (var option in options) {
            if (options.hasOwnProperty(option)) {

                if (typeof options[option] === typeof[]) {
                    options[option] = options[option].join(',');
                }
                newHashArray.push(option + '=' + encodeURIComponent(options[option]));
            }
        }

        return '?' + newHashArray.join('&');
    }

    function...