JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="container">
		<div class="wrapper-board">
			
		</div>
		<div class="output-wrapper">
			<span class="output-value"></span>
		</div>
	</div>
</body>

CSS

/*Board in Javascript*/
.wrapper-board {
	width: 220px;
	font-size: 0;
	height: 200px;
	margin: 50px auto 0 auto;
}

.wrapper-board > i {
  width: 20px;
  height: 20px;
  background: #900;
  border: 1px solid #009;
	display: inline-block;
	cursor: pointer;
}

.wrapper-board > i:hover {
	background: #090;
}

.wrapper-board > i.hl {
	background: pink;
}

.output-wrapper {
	padding-top: 20px;
	text-align: center;
}

.output-value {
	font-size: 16px;
	font-weight: bold;
}

JavaScript

var chooseCellWrap = document.querySelector('.wrapper-board'),
				outputValue = document.querySelector('.output-value'),
				widthSegments = 10,
				heightSegments = 10,
				i;


for (i = 0; i < widthSegments*heightSegments; i++) {
		var chooseCellElem = document.createElement('i');
		chooseCellWrap.appendChild(chooseCellElem);
}
chooseCell = document.querySelectorAll('.wrapper-board > i');

function hightlightCell(x, y) {
  var countCell = document.querySelectorAll('i[data-row='+y+'][data-index='+x+']');
  for (i = 0; i < countCell; i++) {
  	countCell[i].classList.add('hl');
  }
}
var coordCell = function(elem) {
		var x	= +this.getAttribute('data-index'),
				y	= +this.getAttribute('data-row');

		hightlightCell(x+1, y+1);
    hightlightCell(x-1, y+1);
    hightlightCell(x+1, y);
    hightlightCell(x-1, y);
    hightlightCell(x, y-1);
    hightlightCell(x, y+1);
    hightlightCell(x+1, y-1);
    hightlightCell(x-1, y-1);
};


for (i = 0; i < chooseCell.length; i++) {
		chooseCell[i].setAttribute('data-index', i % 10);
		chooseCell[i].setAttribute('data-row', Math.floor(i / 10));
		chooseCell[i].addEventListener('click', coordCell);
}