JSFiddle - React, Tailwind, and code Playground

by Kees C. Bakker

HTML

<table>
  <tr class="boxes">
    <td>
      <table id="tab">
      </table>
    </td>
  </tr>
</table>

CSS

body {
  font-family: 'Consolas';
  font-weight: bold;
  font-size: 15px;
  color: white;
}

table,
tr,
td {
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: collapse;
  color:black;
}

td {
  padding: 10px;
  vertical-align: bottom;
}


._255 {
  background-color: rgba(255, 255, 255, 1);
}
._250 {
  background-color: rgba(250, 250, 250, 1);
}
._245 {
  background-color: rgba(245, 245, 245, 1);
}

JavaScript

let list = [];
let $tab = $('#tab');

for(let r = 255; r >= 240; r -=5){
	for(let g = 255; g >= 240; g -= 5){
  	for(let b = 255; b >= 240; b -= 5){
    		list.push({r, g, b});
    }
  }
}


for(var item of list){
	var $tr = $(`<tr style="background-color:rgba(${item.r}, ${item.g}, ${item.b}, 1);"><td>${item.r},${item.g},${item.b}</td></tr>`);
  $('#tab').append($tr);
}