JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clear">
    <a href="#" id="all" class="selected">All</a> -
    <a href="#" id="print">Print</a> - 
    <a href="#" id="web">Web</a> -
    <a href="#" id="other">Other</a>
</div>

<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>
<div class="all print"><img src="http://placehold.it/100x75&text=PRINT"></div>
<div class="all web"><img src="http://placehold.it/100x75&text=WEB"></div>
<div class="all other"><img src="http://placehold.it/100x75&text=OTHER"></div>

CSS

.clear {
    clear: both;
    text-align: center;
}

.all {
    float: left;
    background: #DD7037;
    padding: 2px;
    margin: 2px;
    width: 104px;
    height: 79px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
}

JavaScript

$('#all').click(function() {
    $('.all').show();
    return false;
});

$('#print').click(function() {
    $('.all').hide();
    $('.print').show();
    return false;
});

$('#web').click(function() {
    $('.all').hide();
    $('.web').show();
    return false;
});

$('#other').click(function() {
    $('.all').hide();
    $('.other').show();
    return false;
});