JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>Conway's game of life</title>
    <style>
      .cell {
        width: 8px;
        height: 8px;
        border: 1px;
      }
      .filled {
        background-color: black;
      }
      .empty {
        background-color: white;
      }
    </style>
  </head>
  <body>
    <table id="field" style="border: 1px solid black"></table>
    <script>
      var size = 50;
      var htmlElements;
      var cells;
      var EMPTY = 0;
      var ALIVE = 1;

      function createField() {
        htmlElements = [];
        cells = [];
        var table = document.getElementById('field');
        for (var y = 0; y < size; y++) {
          var tr = document.createElement('tr');
          var tdElements = [];
          cells.push(new Array(size).fill(EMPTY));
          htmlElements.push(tdElements);
          table.appendChild(tr);
          for (var x = 0; x < size; x++) {
            var td = document.createElement('td');
            tdElements.push(td);
            tr.appendChild(td);
          }
        }
      }

      function draw() {
        for (var y = 0; y < size; y++) {
          for (var x = 0; x < size; x++) {
            htmlElements[y][x].setAttribute('class', 'cell ' + (cells[y][x] == 1 ? 'filled' : 'empty'));
          }
        }
      }

      function countNeibhours(x, y) {
        var count = 0;
        for (dy = -1; dy <= 1; dy++) {
          for (dx = -1; dx <= 1; dx++) {
            var nx = (x + dx + size) % size, ny = (y + dy + size) % size;
            count = count + cells[ny][nx];
          }
        }
        return count - cells[y][x];
      }

      function newGeneration() {
        var newCells = [];
        for (var i = 0; i < size; i++) {
          newCells.push(new Array(size).fill(EMPTY));
        }
        for (var y = 0; y < size; y++) {
          for (var x = 0; x < size; x++) {
            var neibhours = countNeibhours(x, y);
            if (cells[y][x] == EMPTY && neibhours == 3) {
             ...