JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js" type="text/javascript"></script>
<script>
/* SORTS CATEGORIES BY CLASSNAME */
    $(window).load(function(){
    var $container = $('.content-wrapper');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
        
    $('.sort-button-wrapper input').click(function(){
        $('.sort-button-wrapper input').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });
});


/* CHANGE THE VIEW BETWEEN LIST AND GRID */
$(document).ready(function () {
    $('.list').click(function () {
        $('.grid').removeClass('current');
        $('.list').addClass('current');
        $('.content-wrapper').addClass('list-view');
        $('.sort-button-wrapper > .current').click();
    });
    $('.grid').click(function () {
        $('.list').removeClass('current');
        $('.grid').addClass('current');
        $('.content-wrapper').removeClass('list-view');
        $('.sort-button-wrapper > .current').click();
    });
});
</script>


<div class="sort-button-wrapper">
    <input type="submit" class="current" data-filter="*" value="show all" />
    <input type="submit" class="" data-filter=".item_a" value="a" />
    <input type="submit" class="" data-filter=".item_b" value="b" />
    <input type="submit" class="" data-filter=".item_c" value="c" />
    <input type="submit" class="" data-filter=".item_d" value="d" />
</div>
<br>
<div class="view-changer">
    <input type="submit" class="grid current" value="grid" />
    <input type="submit" class="list" value="list" />
</div>
<br>
<div...

CSS

input.current {
    background-color: red;
}
.content-wrapper {
    border: solid black 1px;
    width: 200px;
     /* TO RESIZE THE DIV SMOOTHLY */
    -webkit-transition: .4s;
	-moz-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
.content-wrapper.grid-view div{
    background: silver;
    height: 50px;
    width: 50px;
    margin: 5px;
}
.content-wrapper.list-view div {
    float: left;
    width: 150px;
    margin: 5px;
    opacity: 0.5;
    background: orange;
}