JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unsplash.it/700/700/?random"></script>
<body>
    <header></header>
    <div id="game_object"></div>
    <button>Randomize</button>
</body>

CSS

#game_object {
    background-color: #ffffff;
    height: 705px;
    width: 705px;
    margin: 20px auto;
    position: relative;
}
#board div {
    background: url("https://unsplash.it/700/700/?random") no-repeat scroll 0 0 #ffffff;
    cursor: pointer;
    height: 175px;
    width: 175px;
    background-size: 700px 700px;
    line-height: 175px;
    position: absolute;
    text-align: center;
    /* CSS3 Shadow 

	-moz-box-shadow: inset 0 0 20px #555555;
	-webkit-box-shadow: inset 0 0 20px #555555;
	-ms-box-shadow: inset 0 0 20px #555555;
	-o-box-shadow: inset 0 0 20px #555555;
	box-shadow: inset 0 0 20px #555555;
}
*/

JavaScript

$(document).ready(function () {
    var zi = 1;
    var EmptySquare = 16;

    $.fn.extend({
        fifteen:

        function (square_size) {
            var gameObjectElement = '#' + $(this).attr('id');

            var sqSize = square_size + 'px';
            var boardSize = (square_size * 4) + 'px';

            $(gameObjectElement).html('<div id="board"></div>');

            $('#board').css({
                position: 'absolute',
                width: boardSize,
                height: boardSize,
                border: '1px solid gray'
            });

            for (var i = 0; i < 16; i++) {
                $('#board').append("<div class='" + i + "' style='left:" + ((i % 4) * square_size) + "px; top: " + Math.floor(i / 4) * square_size + "px; width: " + square_size + "px; height: " + square_size + "px; background-position: " + (-(i % 4) * square_size) + "px " + -Math.floor(i / 4) * square_size + "px; '></div>");

                // Select the children of #board ID that are divs, and the 16th one, then make backgroundImage nothing, and background color of white. 
                // This emptys the 16th square.
                $('#board').children("div:nth-child(" + EmptySquare + ")").css({
                    backgroundImage: "",
                    background: "#ffffff"
                });

                // Attach a click event to each of the squares, or divs.
                $('#board').children('div').click(function () {
                    Move(this, square_size);
                });

                function shuffle(array) {
                    var currentIndex = array.length,
                        temporaryValue, randomIndex;

                    // While there remain elements to shuffle...
                    while (0 !== currentIndex) {

                        // Pick a remaining element...
                        randomIndex = Math.floor(Math.random() * currentIndex);
                        currentIndex -= 1;

                        //...