JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filters" class="portfolio_sort_list">
    <li><a href="#" data-filter=".filteritem">All</a>
    </li>
    <li><a href="#" data-filter=".gfx">GFX</a>
    </li>
    <li><a href="#" data-filter=".websites">Websites</a>
    </li>
    <li><a href="#" data-filter=".coding">Coding</a>
    </li>
</ul>
<div id="filter_container">
    <div class="filteritem coding">
        <p>code</p>
    </div>
    <div class="filteritem coding">
        <p>code</p>
    </div>
    <div class="filteritem gfx">
        <p>gfx</p>
    </div>
    <div class="filteritem gfx">
        <p>gfx</p>
    </div>
    <div class="filteritem websites">
        <p>websites</p>
    </div>
    <div class="filteritem websites">
        <p>websites</p>
    </div>
    <div class="clear"></div>
</div>

CSS

#filter_container { background-color: red; width: 430px; padding-top: 10px;}
.filteritem { width: 198px; height: 198px; border: 1px solid white; margin: 0px 0px 10px 10px; float: left;}
.gfx { background-color: blue;}
.coding { background-color: green;}
.websites { background-color: gray; }
.active_filter { background-color: lightgray;}
.clear { clear: both; }

JavaScript

$(document).ready(function () {
    var $activeFilter = $('a[data-filter=".filteritem"]');
    $activeFilter.addClass('active_filter');

    $('#filters a').click(function () {
        
        $activeFilter = $(this);
        $('#filters a').removeClass('active_filter');
        $(this).addClass('active_filter');

        var filter = $(this).attr('data-filter');

        $('#filter_container .filteritem:not(' + filter + ')').fadeOut(500).promise().done(function(){ 
            $('#filter_container ' + filter + '').fadeIn(500)});
        
        
        if (filter == ".filteritem") {
            $('#filter_container ' + filter + '').fadeIn('fast');
        }
    });

});