JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div class="c-grid" id="data-grid"></div>

SCSS

* {
  &,
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

body {
  font-size: 16px;
}

.c-grid {  
  width: 400px;
  font-size: 0;
  padding: 1rem;  
  margin-left: auto;
  margin-right: auto;
  
  &__item {
    display: inline-block;
    padding: 0.5rem;       
    font-size: 1rem;
    margin-top: 1rem;
    
    &--selected span {
      background-color: #ff0000;
      color: #fff;
    }
    
    > span {
      display: inline-block;
      min-width: 100%;  
      padding: 1rem;
      border: 1px solid #aaa;
      text-transform: uppercase;
      font-weight: bold;
      text-align: center;
    }
  }
}

.u-1\/4 {  
  width: 25%;
}

Babel + JSX

const size = 4;
const letters = 'aaabcdeeeeeeeefghiiiijklmnoooopqrrsssstuvwxyz';
const grid = document.getElementById('data-grid');
const sampleLetters = ['eyak', 'ewea', 'eeae', 'tezs'];

function generateGrid(options = { 
	useSampleLetters: true 
}) {
	let board = [];
	let rows = 0;
  let strGrid = '';
	
  while(rows < size) {
  	let rowLetters = '';
  	let cols = 0;
    let row = [];
  	while(cols < size) {
    	const letter = options.useSampleLetters ? sampleLetters[rows][cols] : randomLetter();     
  		strGrid += `<span class="c-grid__item u-1/4"><span>${letter}</span></span>`;
      row.push(letter);
      cols++;
    }
    board.push(row);
    rows++;
  }
  
  grid.innerHTML = strGrid;
  
  return board;
}

function highlightWord(board, word) {
	console.log(board, word);
}

function randomLetter() {
	const randomNumber = Math.floor(Math.random() * letters.length);	
	return letters[randomNumber].toUpperCase();
}

const board = generateGrid({ useSampleGrid: false });
highlightWord(board, 'weak');