JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<div id="container">
  <div><label>1</label></div>
  <div><label>2</label></div>
  <div><label>3</label></div>
  <div><label>4</label></div>
  <div><label>5</label></div>
  <div><label>6</label></div>
  <div><label>7</label></div>
  <div><label>8</label></div>
  <div><label>9</label></div>
</div>

CSS

#container {
	background: #aaa;
	display: flex;
	flex-wrap: wrap;
}
#container > div {
	flex-grow: 1;
	width: 33%;
	height: 100px;
}
#container > div:nth-child(even) {
	background: #23a;
}
#container > div:nth-child(odd) {
	background: #49b;
}


label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 3em;
  color: #fff;
}

JavaScript

function init() {

  const colorPallet = [
    '#000000',
    '#333333',
    '#FFFFFF',
    '#EFEFEF',
    '#72C3DC',
    '#2B8EAD',
    '#6F98AB',
    '#BFBFBF',
    '#2F454E'
  ];

  const container = document.getElementById("container");
  if (container.childNodes && container.childNodes.length) {
    container.childNodes.forEach((node, index) => {
      console.log(node.style.backgroundColor)
      //node.style.backgroundColor = colorPallet[index];
    })
  }
}

setTimeout(() => {
	init();
}, 1000);