JSFiddle - React, Tailwind, and code Playground

HTML

<table id='niceTable'>
  <tr>
    <td>table cell</td>
    <td>table cell</td>
  </tr>
  <tr>
    <td>table cell</td>
    <td>table cell</td>
  </tr>
</table>
<button id='niceButton'>+</button>

CSS

body {
  font-family: helvetica, verdana, arial;
  font-size: 16px;
  background-color: #21262D;
}
table {
  float: left;
  border: 2px solid #21262D;
  background-color: white;
}
td {
  padding: 5px 10px;
  background: #21262D;
  color: white;
}
button {
  background: #21262D;
  border: 2px solid white;
  outline: 2px solid #21262D;
  margin-top: 2px;
  color: white;
  font-size: 22px;
  line-height: 25px;
  transition: all 300ms;
  cursor: pointer;
}
button:hover {
  background-color: grey;
}

JavaScript

var button = document.getElementById('niceButton');
button.addEventListener('click',function(e){
    var table = document.getElementById('niceTable');
    var row = table.insertRow(0);
    var td1 = row.insertCell(0);
    var td2 = row.insertCell(1);
    td1.innerHTML = 'new cell';
    td2.innerHTML = 'new cell';
},false);