JSFiddle - React, Tailwind, and code Playground

HTML

<div id="roller" tabindex="1">
    <div id="plane"></div>
    <div id="splash">
        <div></div>
    </div>
</div>
<div id="roller" tabindex="1">
    <div id="plane"></div>
    <div id="splash">
        <div></div>
    </div>
</div>

CSS

body {
    background: #000;
}
#roller {
    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;
}
#level {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}
#back {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    top: 10px;
    right: 10px;
}
#splash {
    position: absolute;
    top: 0;
    left: 0;
    width: 600px;
    height: 400px;
    background-color: lightgrey;
    overflow: hidden;
}
#splash div {
    margin: 280px 50px 0;
    text-align: center;
}
#splash div a {
    color: #000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #666;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    display: inline-block;
}
#splash div a:hover {
    background-color: #666;
}

JavaScript

var roller = function () {
    var timer,
    level = 0,

        start = function () {
            plane.loadLevel(level);
        },
        selectLevel = function (ev) {
            if ($(ev.target).is('a')) {
                level = $('#splash a').index(ev.target);
                start();
                $('#splash').animate({
                    top: -400
                }, 600, 'easeOutBounce');
            }
            return false;
        },
        showSplash = function () {
            $('#splash').animate({
                top: 0
            }, 600, 'easeOutBounce');
            return false;
        };
    return {
        init: function () {
            var html = [];
            $.each(levels, function (nr) {
                html.push('<a href="#">');
                html.push(nr + 1);
                html.push('</a>');
            });
            $('#splash')
                .find('div').html(html.join('')).end()
                .bind('click', selectLevel);
            $('#back').bind('click', showSplash);
            plane.init();
        }
    };
}();
//tile object
var tile = function (type, i, j, indx, x, y) {
    this.x = x;
    this.y = y;
    this.type = type;
    this.active = true;
    this.ends = false;

    this.getHTML = function () {
        return '<div class="tile tile' + this.type + '" style="left:' + this.x + 'px; top:' + this.y + 'px"></div>';
    };
};
var plane = function () {
    var el,
    back,
    oldTileX,
    oldTileY,
    level = 0,
    tileWidth = 100,
    tileHeight = 100,
    blankWidth = 50, 
    blankHeight = 50,
        tiles = [];
    return {
        init: function (newLevel) {
            el = document.getElementById('plane');
            back = document.getElementById('roller');
        },
        loadLevel: function (newLevel) {
            level = newLevel;
            tiles = [];
            var html = [];
            var currentX = 0;
            var currentY = 0;
            
            for (var i = 0,...