JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div style="width:25% height:250px;" class="all category1">div1 content</div>
<div style="width:25% height:250px;" class="all category2">div2 content</div>
<div style="width:25% height:250px;" class="all category3">div3 content</div>
<div style="width:25% height:250px;" class="all category3">div4 content</div>
<div style="width:25% height:250px;" class="all category3">div5 content</div>
<div style="width:25% height:250px;" class="all category1">div6 content</div>
<div style="width:25% height:250px;" class="all category1">div7 content</div>
<div style="width:25% height:250px;" class="all category2">div8 content</div>
</div>

<a href="#" id="link1">link1</a>
<a href="#" id="link2">link2</a>

JavaScript

$(function(){
$('#link1').click(function(){
$(".all").slideUp(500);
$(".category1").slideDown(500);

});
$('#link2').click(function(){
$(".all").slideUp(500);
$(".category2").slideDown(500);

});
    });