JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>2048</title>
    <style>
      #field {
        border: 1px solid black;
      }
      .cell {
        border: 1px solid black;
        text-align: center;
        width: 80px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <table id="field"></table>
    <script>
      var size = 4;
      var htmlElements;
      var cells;

      function createField() {
        if (htmlElements) {
          return;
        }
        htmlElements = [];
        var table = document.getElementById('field');
        for (var y = 0; y < size; y++) {
          var tr = document.createElement('tr');
          var trElements = [];
          for (var x = 0; x < size; x++) {
            var td = document.createElement('td');
            td.setAttribute('class', 'cell');
            tr.appendChild(td);
            trElements.push(td);
          }
          htmlElements.push(trElements);
          table.appendChild(tr);
        }
      }

      function createCells() {
        cells = [];
        for (var y = 0; y < size; y++) {
          cells.push(new Array(size).fill(0));
        }
      }

      function generateInEmptyCell() {
        var x, y;
        do {
          x = Math.floor(Math.random() * size), y = Math.floor(Math.random() * size);
          if (cells[y][x] == 0) {
            cells[y][x] = Math.random() >= 0.9 ? 4 : 2;
            break;
          }
        } while (true);
      }

      function draw() {
        for (var y = 0; y < size; y++) {
          for (var x = 0; x < size; x++) {
            var td = htmlElements[y][x];
            var v = cells[y][x];
            td.innerHTML = v == 0 ? '' : String(v);
            if (v == 0) {
              td.setAttribute('style', 'background-color: white');
            } else {
              var h = 20 + 24 * Math.log2(2048 / v);
              td.setAttribute('style', 'background-color: hsl(' + h + ', 100%, 50%)');
            }
          }
        }
      }

      function...