JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/DrewDahlman/Mason/master/mason.min.js"></script>
<div id='grid'>
    <div class='box'>BOX - 1</div>
    <div class='box'>BOX - 2</div>
    <div class='box'>BOX - 3</div>
    <div class='box'>BOX - 4</div>
    <div class='box'>BOX - 5</div>
    <div class='box'>BOX - 6</div>
</div>
<div class='filler_content'>
    <div class='filler'>1</div>
    <div class='filler'>2</div>
    <div class='filler'>3</div>
    <div class='filler'>4</div>
</div>

CSS

#grid{
    height: 100%;
    width: 100%;
    position: relative;
}
.box {
    background-color: #222;
    float: left;
    position: relative;
    color: #fff;
    box-shadow: 0px 0px 1px 1px #fff inset;
}
.filler_content {
  display: none;
}
.filler {
    background-color: #ff0000;
    color: #fff;
    box-shadow: 0px 0px 1px 1px #fff inset;
}

JavaScript

$(function(){
   $("#grid").mason({
      itemSelector: ".box",
      ratio: 1.8,
      sizes: [
          [1,2],
          [1,3],
          [2,2],
      ],
      filler: {
          itemSelector: '.filler',
          filler_class: 'custom_filler'
      },
      promoted: [
        ['promoted',2,3]
      ],
      layout: 'fluid'
  });
});