JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" class="main">

</div>
<div id='log' class="log"></div>

CSS

.main .line {
    clear: both;
}
.main .line div {
    width: 20px;
    height: 20px;
    float: left;
    margin: 1px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: background-color .5s;
}
.main .line div.s {
    background-color: #bbb;
    transition: background-color .5s;
}
.main .line div.f {
    background-color: green;
    transition: background-color 2s;
}

JavaScript

var s = '', x=0, y=0, move=1, map=[], main = document.getElementsByClassName('main')[0];
var log=document.getElementsByClassName('log')[0];
for (var i=0; i<100; ++i) map.push(parseInt(i/10) + '_' + i%10 );
map.forEach (function (itm, num) { 
    s += (( num%10 == 0 ) ? "<div class='line'>":"") + "<div class="+num+"></div>"
       + (( num%10  == 9 ) ? "</div>" : "");
})
 main.innerHTML = s;

document.body.onkeydown = function(e){
    move = (e.keyCode - 38) % 2 + (e.keyCode - 39) % 2 * 10
    log.innerHTML = move;
};
 
var timer = setInterval(function () {
}, 300);