JSFiddle - React, Tailwind, and code Playground

by Math3w C

HTML

<nav>
    <a data-show="all" href="#">All</a> /
    <a data-show="category-a" href="#">Category A</a> /
    <a data-show="category-b" href="#">Category B</a>
</nav>
<article>
    <div class="category-b">hello</div>
    <div class="category-a">hello world folk</div>
    <div class="category-a">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-b">Katarina vs Alistar</div>
    <div class="category-a">hello</div>
    <div class="category-a">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-b">bonjour Mr</div>
    <div class="category-a">Katarina vs Alistar</div>
    <div class="category-b">hello</div>
    <div class="category-b">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-a">Katarina vs Alistar</div>
    <div class="category-a">hello</div>
    <div class="category-b">hello world folk</div>
    <div class="category-b">lorem ipsum dolores</div>
    <div class="category-a">bonjour Mr</div>
    <div class="category-b">Katarina vs Alistar</div>
</article>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
article {
    width: 400px;
}
div {
    width: 24%;    
    border: 1px solid black;    
    display:inline-block;
    vertical-align:top;
    padding: 10px;
    margin-bottom: 10px;
}


.category-b {
    background-color: #eee;
}

JavaScript

$('nav a').on('click', function(e) {
    e.preventDefault();
    var show = $(this).data('show');
    if(show == 'all') {
        $('div').show();
    } else {
        $('div').hide();
        $('.' + show).show();
    }
});