JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Hello</td>
    </tr>
</table>

CSS

td {
  border: 1px solid #000;
  padding: 5px;
  min-width: 100px;
  cursor: text;
  font-size: 14px;
}

input {
  font-size: 12px;
  max-width: 100px;
  outline: 0;
  margin: 0;
  padding: 3px;
}

JavaScript

var table = document.querySelector('table');
table.addEventListener('click', function (e) {
  if (e.target.nodeName !== 'TD') {
    return;
  }
  
  function replace(node) {
    e.target.replaceChild(node, e.target.firstChild);
  }
    
  var input = document.createElement('input');
  input.value = e.target.innerText;
  input.addEventListener('blur', function () {
    replace(document.createTextNode(input.value));
  });
  replace(input);
  input.focus();
});


for (var i = 0; i < 100; i++) {
  var tr = document.createElement('tr');
  for (var j = 0; j < 100; j++) {
     var td = document.createElement('td');
     td.innerText = i + '.' + j;
     tr.appendChild(td);
  }
  table.appendChild(tr);
}