JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="filterOptions">
    <li class="active"><a href="#" data-type="all">All</a>

    </li>
    <li><a href="#" data-type="ty">Typography</a>

    </li>
    <li><a href="#" data-type="pr">Print</a>

    </li>
</ul>
<ul class="ourHolder">
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
</ul>

JavaScript

$(document).ready(function () {

    var $holder = $('ul.ourHolder');

    var $data = $holder.clone();
    var holders = $('.ourHolder li');

    $('#filterOptions li a').click(

    function (e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).data('type');
        var noOpac = $(this).data('type');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
            $filteredData.animate({
                opacity: 1.0
            }, 500);
            $('.ourHolder li').animate({
                opacity: 1.0
            }, 0);
        } else {
            $('.ourHolder li').animate({
                opacity: 0.05
            }, 250);
            $.each(holders, function (i, v) {
                if ($(this).hasClass(noOpac)) {
                    $(this).animate({
                        opacity: 1.0
                    }, 0);
                }
            });
        }

    });
});