JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
    <div class="item" id="a">
        <div class="close">X</div>
    </div>
    <div class="item" id="b">
        <div class="close">X</div>
    </div>
    <div class="item" id="c">
        <div class="close">X</div>
    </div>
    <div class="item" id="d">
        <div class="close">X</div>
    </div>
    <div class="item" id="e">
        <div class="close">X</div>
    </div>
    <div class="item" id="f">
        <div class="close">X</div>
    </div>
    <div class="item" id="g">
        <div class="close">X</div>
    </div>
    <div class="item" id="h">
        <div class="close">X</div>
    </div>
    <div class="item" id="i">
        <div class="close">X</div>
    </div>
    <div class="item" id="l">
        <div class="close">X</div>
    </div>
    <div class="item" id="m">
        <div class="close">X</div>
    </div>
    <div class="item" id="n">
        <div class="close">X</div>
    </div>
    <div class="item" id="o">
        <div class="close">X</div>
    </div>
    <div class="item" id="p">
        <div class="close">X</div>
    </div>
    <div class="item" id="q">
        <div class="close">X</div>
    </div>
    <div class="item" id="r">
        <div class="close">X</div>
    </div>
</div>

CSS

.item {
    width: 60px;
    height: 60px;
    background: #AAA;
    margin: 0px;
    float: right;
    overflow:hidden;
}
.close {
    width:150px;
    float:right;
    cursor: pointer;
}
.item.selected {
    width: 180px;
    height: 180px;
    background: red;
}
/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
/**** Isotope CSS3 transitions ****/
 .isotope, .isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

$(function () {

    var $container = $('#container'), $items = $('.item');
    var $close = $('.close');
    $close.hide();

    $(document).on('click', '.close', function (e) {
        $(this).parent('div').toggleClass('selected');
        $close.hide();
        $container.isotope('reLayout');
    });

    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 60
        },
        getSortData: {
            selected: function ($item) {
                // sort by selected first, then by original order
                return ($item.hasClass('selected') ? -1000 : 0) + $item.index();
            }
        },
        sortBy: 'selected'
    });

    $items.click(function () {
        var $this = $(this);
        var cla = $this.attr('class');
        if (cla === "item isotope-item") {
            var what = $container.find('div.selected').attr('id');
            $('#' + what).removeClass('selected');
            $(this).addClass('selected');
            $close.show();
            $container.isotope('updateSortData', $this).isotope();
        }
    });






});