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>
	<script src="board.js"></script>
</body>

CSS

/*Board in Javascript*/
* {
  padding: 0;
  margin: 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.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;
}

.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'),
			chooseCell = document.querySelectorAll('.wrapper-board > i');

	chooseCellWrap.appendChild(chooseCellElem);
}


var coordCell = function(e) {
	var indexCell = this.getAttribute('data-index'),
			position = {x: 0, y: 0},
			total = widthSegments*heightSegments;

	outputValue.innerHTML = 'Индекс ячейки: ' + indexCell;

};


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