JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="container">
    <div class="box" id="marker"></div>
</div>

CSS

#container {
    border: 2px solid #058;
    display: table;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: relative;
}
.box {
    background: #6ac;
    border: 1px solid #6ac;
    cursor: none;
    float: left;
    height: 15px;
    width: 15px;
}
.box:hover {
    border: 1px solid #7bd;
}
.box.first {
    clear: left;
}
#marker {
    background: #653;
    position: absolute;
}

JavaScript

$(document).ready(function(){
    var myGrid = new Grid(20, 20);
    myGrid.Draw();
    $('.box').click(function(){
        var box = $(this);
        var position = box.position();
        $('#marker').animate({
            left: position.left,
            top: position.top
        }, 500);
    });
});
function Grid (height, width)
{
    this.height = height;
    this.width = width;
    this.area = height * width;
    this.Draw = function() {
        var class;
        for (i = 0; i < this.height; i++) {
            for (j = 0; j < this.width; j++) {
                class = j === 0 ? " first" : "";
                $('#container').append('<div class="box' + class + '"></div>');
            }
        }
    };
}