JSFiddle - React, Tailwind, and code Playground

by Shashank Srivastava

HTML

<div id="main">
</div>

JavaScript

var colors = ['#FF9999','#FF0000','#660000','#FFAA99','#FF2A00','#661100','#FFBB99','#FF5500','#662200','#FFCC99','#FF8000','#663300','#FFDD99','#FFAA00','#664400','#FFEE99','#FFD500','#665500','#FFFF99','#FFFF00','#666600','#EEFF99','#D4FF00','#556600','#DDFF99','#AAFF00','#446600','#CCFF99','#80FF00','#336600','#BBFF99','#55FF00','#226600','#AAFF99','#2BFF00','#116600','#99FF99','#00FF00','#006600','#99FFAA','#00FF2B','#006611','#99FFBB','#00FF55','#006622','#99FFCC','#00FF80','#006633','#99FFDD','#00FFAA','#006644','#99FFEE','#00FFD5','#006655','#99FFFF','#00FFFF','#006666','#99EEFF','#00D4FF','#005566','#99DDFF','#00AAFF','#004466','#99CCFF','#007FFF','#003366','#99BBFF','#0055FF','#002266','#99AAFF','#002BFF','#001166','#9999FF','#0000FF','#000066','#AA99FF','#2A00FF','#110066','#BB99FF','#5500FF','#220066','#CC99FF','#7F00FF','#330066','#DD99FF','#AA00FF','#440066','#EE99FF','#D400FF','#550066','#FF99FF','#FF00FF','#660066','#FF99EE','#FF00D4','#660055','#FF99DD','#FF00AA','#660044','#FF99CC','#FF0080','#660033','#FF99BB','#FF0055','#660022','#FF99AA','#FF002B','#660011'];

var colors1 = [], colors2 = [], colors3 = [], colors4 = [];
colors.forEach(function(color, index) {
	if(index%4 === 1) { colors1.push(color); }
  else if(index%4 === 2) { colors2.push(color); }
  else if(index%4 === 3) { colors3.push(color); }
  else if(index%4 === 4) { colors4.push(color); }
});

var newColors = colors1.concat(colors2).concat(colors3).concat(colors4);
newColors.forEach(function(color) {
	var div = document.createElement('div');
  div.style.width = div.style.height = '20px';
  div.style.margin = '5px';
  div.style.float = 'left';
  div.style.background = color;
  document.getElementById('main').appendChild(div);
})