JSFiddle - React, Tailwind, and code Playground

HTML

<table id="board" class="board" border="1">
    <!-- use a hidden fourth column to keep track of the data temporarily shifted off the right side -->
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td hidden>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td hidden>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td hidden>&nbsp;</td></tr>
</table>

<input id="shiftState" type="checkbox">Shift</input>

<br/>
<br/>
<br/>

<textarea id="history" style="height:100px; width:450px">
</textarea>

CSS

.board tr td{
        width: 40px;
        height: 40px;
        border: 1px solid black;
        text-align: center;
    }

JavaScript

function createTextElement(text){
    var span = document.createElement("span");
    if(text.length == 0){text = "&nbsp;";}
    span.innerHTML = text;
    return span;
}

function createButton(text, callback){https://jsfiddle.net/r50y76f5/#
    var button = document.createElement("button");
    button.innerHTML = text;
    button.onclick = callback;
    return button;
}

function removeAllChildren(element){
    while(element.childNodes.length > 0){
        element.removeChild(element.childNodes[0]);
    }
}

function log(msg){
    var area = document.getElementById("history");
    area.innerHTML += msg + "\n";
    area.scrollTop = area.scrollHeight;
}

function repr(move){
    var result = "Shift: ";
    if (move[0] == "1"){
        result += "Yes.";
    }
    else{
        result += "No. ";
    }

    var direction = "";
    if (move[1] == 0 && move[2] == 0){direction = "north-west";}
    if (move[1] == 0 && move[2] == 1){direction = "west";}
    if (move[1] == 0 && move[2] == 2){direction = "south-west";}
    if (move[1] == 1 && move[2] == 0){direction = "north";}
    if (move[1] == 1 && move[2] == 1){direction = "center";}
    if (move[1] == 1 && move[2] == 2){direction = "south";}
    if (move[1] == 2 && move[2] == 0){direction = "north-east";}
    if (move[1] == 2 && move[2] == 1){direction = "east";}
    if (move[1] == 2 && move[2] == 2){direction = "south-east";}

    result += " place piece in " + direction + " cell.";
    return result;
}

function setCellContents(x,y, element){
    var board = document.getElementById("board");
    var row = board.getElementsByTagName("TR")[y];
    var cell = row.getElementsByTagName("TD")[x];
    removeAllChildren(cell);
    cell.appendChild(element);
}

function getCellContents(x,y){
    var board = document.getElementById("board");
    var row = board.getElementsByTagName("TR")[y];
    var cell = row.getElementsByTagName("TD")[x];
    return cell.childNodes[0];
}

function setCellText(x,y, text){
   ...