JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <td>2</td>
        <td id="cell_02"></td>
        <td id="cell_12"></td>
        <td id="cell_22"></td>
    </tr>
    <tr>
        <td>1</td>
        <td id="cell_01"></td>
        <td id="cell_11"></td>
        <td id="cell_21"></td>
    </tr>
    <tr>
        <td>0</td>
        <td id="cell_00"></td>
        <td id="cell_10"></td>
        <td id="cell_20"></td>
    </tr>
    <tr>
        <td>-</td>
        <td>0</td>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

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

<br/>

<span id="choice_area">
</span>

JavaScript

function create_button(text, callback){
    var button = document.createElement("button");
    button.innerHTML = text;
    button.onclick = callback;
    return button;
}

function set_cell(x,y,value){
    var name = "cell_" + x.toString() + y.toString();
    var cell = document.getElementById(name);
    if (cell != undefined){
        cell.innerHTML = value;
    }
    else{
        throw "unknown element: " + name;
    }
}

function get_cell(x,y){
    var name = "cell_" + x.toString() + y.toString();
    var cell = document.getElementById(name);
    if (cell != undefined){
        return cell.innerHTML;
    }
}

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. ";
    }
    result += " place piece at: (" + move[1] + ", " + move[2]  + ")";
    return result;
}

function perform_move(move, player_char){
    var should_shift = (move[0] == "1");
    var x = parseInt(move[1]);
    var y = parseInt(move[2]);
    if (should_shift){
        for(var i = 2; i >= 0; i -= 1){
            for (var j = 0; j < 3; j += 1){
                if(i == 0){
                    set_cell(i,j, "&nbsp;");
                }
                else{
                    set_cell(i,j, get_cell(i-1, j));
                }
            }
        }
    }
    set_cell(x,y, player_char);
    log(player_char + "'s move. " + repr(move));
}

function computer_move(){
    perform_move(current_tree[0], "X");
    //todo: create player movement buttons.
    var responses = current_tree[1];
    var button_area = document.getElementById("choice_area");
    var has_response = false;
    for(var move in responses){
        has_response = true;
        var button = create_button(
            repr(move),
            (function(x){
                return function(){player_moved(x);}
...