JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container"></div>

CSS

.rect {
  overflow: auto;
  height: 50px; width: 50px;
  margin: 5px;
  border-radius: 5px;
  display: inline-block;
}

JavaScript

function generateColor(numOfSteps, step) {
  let r, g, b;
  const h = step / numOfSteps;
  const i = ~~(h * 6);
  const f = (h * 6) - i;
  const q = 1 - f;

  switch (i % 6) {
    case 0: r = 1; g = f; b = 0; break;
    case 1: r = q; g = 1; b = 0; break;
    case 2: r = 0; g = 1; b = f; break;
    case 3: r = 0; g = q; b = 1; break;
    case 4: r = f; g = 0; b = 1; break;
    case 5: r = 1; g = 0; b = q; break;
    default: break;
  }
  let color = '#';
  [r, g, b].forEach(c => {
    color += `00${(~~(c * 255)).toString(16)}`.slice(-2);
  });
  return color;
}
function randomColor(brightness){
  function randomChannel(brightness){
    var r = 255-brightness;
    var n = 0|((Math.random() * r) + brightness);
    var s = n.toString(16);
    return (s.length==1) ? '0'+s : s;
  }
  return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
}

const colors = [...new Set(Array(5000).fill(true).map(randomColor.bind(null, 0)))];
console.log(colors.length);

Array(400).fill(true).forEach((_, idx, arr) => {
	/* const c = generateColor(arr.length, idx * 30); */
  const c = randomColor(0);
  const d = document.createElement('DIV');
  d.classList.add('rect');
  d.style.backgroundColor = c;
  document.querySelector('.container').appendChild(d);
});