JSFiddle - React, Tailwind, and code Playground

HTML

<button id="invert-colors">Invert colors</button>

CSS

table {
  border-collapse: collapse;
  margin-top: 10px;
}

td {
  width: 28px;
  height: 28px;
  border: 1px solid black;
}

td,
table.inverted td.marked
{
  background-color: white;
}

td.marked,
table.inverted td
{
  background-color: black;
}

JavaScript

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

table.addEventListener('mousedown', function (event) {
	event.target.classList.add('marked');
});

document.getElementById('invert-colors').addEventListener('click', function () {
	if (table.classList.contains('inverted')) {
  	table.classList.remove('inverted');
  } else {
  	table.classList.add('inverted');
  }
});