JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.1/isotope.pkgd.js"></script>
<button class="filter" id="exit">Exit</button>
<button class="filter" id="creation">Creation</button>
<button id="clear">Clear</button>

<ul class="grid">
	<div class="grid_gutter"></div>
    <li class="grid_item exit">
        <span class="grid_text">Exit</span>
    </li>
	<li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
	<li class="grid_item creation">
        <span class="grid_text">Creation</span>
    </li>
</ul>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.grid {
    list-style: none;
    margin: 1em;
    padding: 0;
    text-indent: 0;
}

.grid_item {
    background: gray;
    margin: 0 0 1%;
    padding-top: 40%;
    position: relative;
    width: 49.5%;
}

.grid_text {
    color: #fff;
    position: absolute;
    top: 50%; left: 0; right: 0; bottom: 0;
    text-align: center;
}

.grid_gutter {
    width: 1%;
}

JavaScript

var config = {
	itemSelector: '.grid_item',
    //percentPosition: true,
	layoutMode: 'fitRows',
	fitRows: {
		gutter: '.grid_gutter'
	}
}

$('.grid').isotope(config);

$('.filter').on('click', function(){
    var type = $(this).attr('id');
    $('.grid').isotope({
		filter : '.' + type
	});
});

$('#clear').on('click', function(){
    $('.grid').isotope({
		filter : '*'
	});
});