JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="/assets/javascript/imagesloaded.pkgd.min.js"></script>
<body>
    <div id="filters" class="button-group">
        <button class="button is-checked" data-filter="*">all</button>
        <button class="button" data-filter="semantics">semantics</button>
        <button class="button" data-filter="ai">ai</button>
        <button class="button" data-filter="text">text</button>
        <button class="button" data-filter="design">design</button>
    </div>
    <div class="grid">
        <div class="grid-sizer"></div>
        <div class="grid-item" data-category="text semantics"></div>
        <div class="grid-item" data-category="semantics ai"></div>
        <div class="grid-item" data-category="design ai"></div>
        <div class="grid-item" data-category=""></div>
    </div>
</body>

CSS

*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.grid:after {
    content:'';
    display: block;
    clear: both;
}
.grid-item {
    width: 50%;
    height: 200px;
    padding: 10px;
    border: 1px solid black;
}
.button {
    display: inline-block;
    padding: 0.3em 1.0em 0.3em 1.0em;
    background-color: lightgrey;
}
.button:hover {
    background-color: lightblue;
}
.button:active, .button.is-checked {
    background-color: blue;
}
.button.is-checked {
    color: white;
}

JavaScript

$(document).ready(function () {

    // ----- GRIDS -----

    // init Isotope
    // for projects and teching
    var $container = $('.grid').isotope({
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',
        percentPosition: true,
        fitRows: {
            columnWidth: '.grid-sizer'
        }
    });

    // bind grids filter button click
    $('#filters').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        $container.isotope({
            filter: function () {
                if (filterValue == "*") return true;
                // _this_ is the item element
                var categories = $(this).attr('data-category').split(" ");
                return categories.indexOf(filterValue) != -1;
            }
        });
    });

    // change is-checked class on filter buttons
    $('.button-group').each(function (i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function () {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });

});