JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/2.1.2/packery.pkgd.min.js"></script>
<html>
<head></head>
<body>
  

<div class="packery-test">
  <div id="packery-item-1" class="packery-item sm" style="width: 33.3333%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-2" class="packery-item sm" style="width: 33.3333%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-3" class="packery-item " style="width: 66.6667%; height: 200px; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-4" class="packery-item sm" style="width: 33.3333%; height: 200px; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-5" class="packery-item " style="width: 100%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-6" class="packery-item " style="width: 66.6667%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-7" class="packery-item " style="width: 33.3333%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-8" class="packery-item " style="width: 100%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-9" class="packery-item " style="width: 66.6667%; height: 200px; padding: 20px;"><div><span></span></div></div>
	<div id="packery-item-10" class="packery-item sm" style="width: 33.3333%; height: 200px; padding: 20px;"><div><span></span></div></div>
  <div class="clearFix"></div>
</div>
</body>
</html>

SCSS

* {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
}

.clearFix {
  clear: both;
}

.packery-test {
  width: 800px;

}

.packery-item {
  position: relative;
  float: left;
  width: 100% / 3 * 1;
  background-color: #f5f5f5;
  color: #fff;
  > div {
    padding: 10px;
    height: 100%;
    background-color: #222;
  }
}

JavaScript

var $test = $('body').find( '.packery-test' ).packery({
  itemSelector: '.packery-item',
  columnWidth: '.packery-item.sm',
  percentPosition: true,
  initLayout: true
});

  function orderItems() {
    var itemElems = $test.packery( 'getItemElements' );

    $( itemElems ).each( function( i,itemElem ) {
      $( itemElem ).find( 'span' ).html( i+1 );
    });

    // console.log( itemElems );
  }

orderItems();