JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<div id="mapDiv">
<table id="chess">
</table>
</div>

CSS

table {
  border-collapse: collapse;
}
table tr td {
  width: 1px;
  height: 1px;
  border: 0px solid;
  padding: 0px;
}
.pxl {
  width: 1px;
  height: 1px;
  position: absolute;
}

JavaScript

var table = document.getElementById("chess");
var b = 0;

for (var b=0;b<255;b+=5) {
  for (var r=0;r<255;r+=5) {
    var row = table.insertRow();
        for (var g=0;g<255;g+=5) {
          var cell = row.insertCell();
          cell.innerHTML = "<div class='pxl' id='"+r+"-"+g+"-"+b+"'</div>";
          if (/*b < 100 ||*/
          	(b < 100 && r > 200) ||
            (b > 175 && r > 175 && g > 175) ||
            (r > 125 && r > 1*g && b < 100) &&
            (g > b)) {
          document.getElementById(r+"-"+g+"-"+b).style.backgroundColor= 'rgb(' + r + ',' + g + ',' + b + ')';
          document.getElementById(r+"-"+g+"-"+b).style.top= b*10%500+r/5 + "px";
          document.getElementById(r+"-"+g+"-"+b).style.left= Math.floor(b*10/500)*50+g/5 + "px";
          } else {
          {
          document.getElementById(r+"-"+g+"-"+b).style.backgroundColor= 'rgba(' + r + ',' + g + ',' + b + ',' + 0.25 + ')';
          document.getElementById(r+"-"+g+"-"+b).style.top= b*10%500+r/5 + "px";
          document.getElementById(r+"-"+g+"-"+b).style.left= Math.floor(b*10/500)*50+g/5 + "px";
          }
          }
        }
  }
}