JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/gutterwidth.js"></script>
<div id="content-wrap">
    <div class="main-grid">
        

        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>

        <div class="grid-break test" style="background-color: orange"></div>
        
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        <div class="grid-block nav-block" style="background-color: pink;"></div>
        
    </div>
</div>

CSS

#content-wrap {
    position: absolute;
    width: 100%;
    height: auto;
    top: 80px;
    left: 0;
}
.main-grid {
    width: 100%;
    position: relative;
    margin: 0 auto;
    top: 0;
    left: 50%;
    margin-left: -225px;
    overflow: inherit !important;
}
.grid-block {
    width: 220px;
    height: 220px;
    margin-bottom: 10px;
}

.grid-break {
    position: relative;
    width: 100%;
    height: 200px;
    margin-left: -50%;
    padding-right: 100%;
    background-color: orange;
    margin-bottom: 10px;
}
/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-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;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

$(document).ready(function(){
    
var $container = $('.main-grid');

$container.imagesLoaded( function(){
$container.isotope({
    itemSelector: '.grid-block, .grid-break',
    animationEngine: 'best-available',
    masonry: {
    columnWidth: 8,
    gutterWidth: 25
    }
});
    });
    
  });