JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
		<div id="caption">
			<label>Уровень сложности: 
			<select id="levelOfDifficulty">
				<option value="0">8 x 8 (10 мин)</option>
				<option value="1">16 x 16 (40 мин)</option>
				<option value="2">30 x 16 (99 мин)</option>
			</select>
			</label>
			<button id="startButton">Новая игра</button>
		</div>
		<div id="wrapper"></div>
	</div>

CSS

* {
	padding: 0;
	margin: 0;
}
html, body {
	background: #fff;
	color: #000;
}
#box {
	width: 800px;
	margin: auto;
	border: 1px solid black;
}
#caption {
	text-align: center;
	padding: 5px;
	margin: 5px;
}
#wrapper {
	text-align: center;
}
#wrapper table {
	border-collapse: collapse;
	margin: 15px auto;
}
#wrapper td {
	width: 25px;
	height: 25px;
	border: 1px solid #000;
	background-color: #ccc;
	box-shadow: inset 0 0 1px #333;
	-moz-box-shadow: inset 0 0 1px #333;
	-webkit-box-shadow: inset 0 0 1px #333;
}

JavaScript

/******************************************/
function getMinesPositions(){
    levelOfDifficulty = selectElement.value;
    switch (levelOfDifficulty){
        case '0':
            width = 8;
            height = 8;
            count = 10;
            minesArray = createMinesArray(width, height, count);
        break;
        case '1':
            width = 16;
            height = 16;
            count = 40;
            minesArray = createMinesArray(width, height, count);
        break;
        case '2':
            width = 30;
            height = 16;
            count = 99;
            minesArray = createMinesArray(width, height, count);
    }
    minesArray = minesArray.shuffle();
}
/***********************************************/
function createMinesArray(width, height, count){
    var minesArray = [];
    var length = width * height;
    for(var i=0; i < length; i++){
        if(i < count){
            minesArray[i] = true;
        }else{
            minesArray[i] = false;
        }
    }
    return minesArray;
}
/**********************************************/
function drawTable(){
    var wrapper = document.getElementById("wrapper");
    var table = document.createElement('table');
    table.setAttribute('id', 'field');
    table.addEventListener('click', checkCell);
    table.addEventListener('contextmenu', toggleFlag);
    wrapper.appendChild(table);
    for(var i=0, id = 0; i < height; i++){
        var tr = document.createElement('tr');
        table.appendChild(tr);
        for(var j=0; j < width; j++, id++){
            var td = document.createElement('td');
            td.setAttribute('id', id);
            tr.appendChild(td);
        }
    }
}
/*********************************************/
function dropOldTable(){
    var wrapper = document.getElementById("wrapper");
    if(wrapper.hasChildNodes()){
        wrapper.innerHTML = '';
    }
}
/********************************************/
function checkCell(e){
    var target = e.target;
    var id =...