JSFiddle - React, Tailwind, and code Playground

by alexdresko

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
<button id="add">
Add
</button>
<div id="container">

</div>

CSS

html, body {
    height: 100%;
    margin: 0px auto;
}
body {
  background-color: #D3D3D3;
  	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
}

#container{
    background-color: #333;
    position: absolute;
    margin-top: -50px;
    margin-left: -50px;
    margin: 0 auto;
      
 }

.box{
    width: 300px;
    height: 300px;
    background-color: #e74c3c;
    margin: 20px;
    
}

JavaScript

var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.box',
  masonry: {
  columnWidth: 100,
  isFitWidth: true
}
});

$("#add").click(function() {
	var asdf = $('<div class="box"></div>');
	$container.append(asdf);
  
	$container.isotope('appended', asdf);
	center();

});

function center() {
  $container.css({
          'position' : 'absolute',
          'left' : '50%',
          'top' : '50%',
          'margin-left' : -$container.outerWidth()/2,
          'margin-top' : -$container.outerHeight()/2
      });
}