JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" tabindex="1">
            <div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div>
            <div class="tile tile3" block-id="2" style-id="2" style="left:100px; top:0px"></div>
            <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div>
            <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div>
            <div class="tile tile2" block-id="5" style-id="2" style="left:0px; top:100px"></div>
            <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div>
        </div>

CSS

body {
    background: #000;
}
#main {
    background: grey;
    position: absolute;
    width: 600px;
    height: 400px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -300px;
    z-index: 10000;
}
.tile {
    position: absolute;
    width: 100px;
    height: 100px;
}
.tile1 {
    background-color: tomato;
    border: 0px solid red;
}
.tile2 {
    background-color: lightblue;
    border: 0px solid blue;
}
.tile3 {
    background-color: MediumAquaMarine;
}
.tile4 {
    background-color: AntiqueWhite;
}

JavaScript

var tiles = [],
tile_re = /tile(\d+)/;

$('.tile').each(function(i) {
    tiles[i] = this.className.match(tile_re)[0];
});

function shuffle(a)
{
  var t;

  for (var i = a.length - 1; i > 0; --i) {
    var p = Math.floor(Math.random() * (i + 1));
    if (p !== i) {
      t = a[i];
      a[i] = a[p];
      a[p] = t;
    }
  }
}

shuffle(tiles);

$('.tile').each(function(i) {
  this.className = 'tile ' + tiles[i];
});