JSFiddle - React, Tailwind, and code Playground

by Eugene Vilder

HTML

<div id="root"></div>

React

import {createRoot} from 'react-dom';

const getRandomInt = (max) =>Math.floor(Math.random() * max);

const ColorsMatch = () => {
  const colors = ['red', 'yellow', 'green', 'blue'];
  const gridSize = [5, 5];
  const grid = [];

/*   const drawGrid = () => {
    for (let line=0; line<gridSize[0]; line++) {
      if (!grid[line]) {
        grid[line] = [];
      }
      for (let col=0; col<gridSize[1]; col++) {
        const colorIndex = getRandomInt(colors.length);
          grid[line].push({
          color: colors[colorIndex]
        });
      }
    }
  }; */

    return (
      <div>
        <h2>Colors Match</h2>
        <div className='container'>
        	{
  					grid[0].map(({color}) => (
      				<div className='cell' style={{ backgroundColor: color}} />
            ))
	        }
        </div>
      </div>
    );
};

/* ReactDOM.render(<ColorsMatch />, document.querySelector("#app")) */
createRoot(
  document.getElementById('root')
).render(<ColorsMatch />)