JSFiddle - React, Tailwind, and code Playground

HTML

<body style="overflow:hidden;">
    <div id='grid'>
        <div class='box' style="background: red">1</div>
        <div class='box' style="background: blue">2</div>
        <div class='box' style="background: green">3</div>
        <div class='box' style="background: red">4</div>
        <div class='box' style="background: blue">5</div>
        <div class='box' style="background: green">6</div>
        <div class='box' style="background: red">7</div>
        <div class='box' style="background: blue">8</div>
        <div class='box' style="background: green">9</div>
    </div>
</body>

CSS

#grid {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 0;

  font-size: 25px;
  font-family: 'Helvetica';
  color: #eaeaea;
}
div.box {
  color: white;
  font-size: 20px;  
  display: inline-block;
  position: relative;
  float: left;
  position: relative;
  -webkit-box-shadow: 0 0 0 1px #fff inset;
  -moz-box-shadow: 0 0 0 1px #fff inset;
  -o-box-shadow: 0 0 0 1px #fff inset;
  box-shadow: 0 0 0 1px #fff inset;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
}

JavaScript

/////////////////////////////////////////
//
//	MasonJS
//	Version 1.5
//	Author: Drew Dahlman ( www.drewdahlman.com )
// 	MIT License
//
/////////////////////////////////////////

(function($) {
	$.fn.mason = function(options, complete) {

		var defaults = {
			itemSelector: null,
			ratio: 0,
			sizes: [],
			columns: [
				[0, 480, 1],
				[480, 780, 2],
				[780, 1080, 3],
				[1080, 1320, 4],
				[1320, 1680, 5]
			],
			promoted: [],
			filler: {
				itemSelector: options.itemSelector,
				filler_class: 'mason_filler'
			},
			layout: 'none',
			gutter: 0
		};

		/*
		 * Complete Callback
		 */
		if (complete) {
			var callback = {
				complete: complete
			}
		}

		var elements = {
			block: {
				height: 0,
				width: 0
			},
			matrix: []
		};


		return this.each(function() {
			var settings, callbacks, $self;

			settings = $.extend(defaults, options);
			callbacks = $.extend(callback, complete);

			$self = $(this);
			$selfID = $(this).attr('id');

			/*
			 * Create Blocks and give dimensions
			 */

			function setup() {

				/*
				 * Define our container element.
				 * Note we append a clear div in order to get a height later on, VERY IMPORTANT!
				 */
				if ($self.children(".mason_clear").length < 1) {
					$self.append("<div class='mason_clear' style='clear:both;position:relative;'></div>");
				}

				elements.block.height = parseFloat((($self.width() / columnSize()) / settings.ratio).toFixed(0));
				elements.block.width = parseFloat(($self.width() / columnSize()));

				// Size Elements
				sizeElements();
			};

			/*
			 * Size elements according to block size and column count
			 */

			function sizeElements() {
				var col = columnSize();

				if (col == 1) {
					$sel = $self.children(settings.itemSelector);
					$sel.height(elements.block.height);
					$sel.width(elements.block.width);
					$sel.css({
						'margin': '0px'
					});
				} else {


					/*
					 * Push our promoted sizes into our sizes array ( this is for counting...