JSFiddle - React, Tailwind, and code Playground

HTML

<!--write header-->
<div class="center MtopBig" id="container">
    <div class="counter" id="timer">383</div>
    <div class="counter" id="flipped">57</div>
    <table id="grid" class="center MtopSmall"></table>
    <input type="button" class="MtopSmall" value="start!" name="startButton" onclick="start();">
    <p id="youSuck"></p>
    <div id="userOptionsDiv"></div>
</div>

CSS

@charset"utf-8";

/* CSS Document */
 table {
    border-collapse: collapse;
    border-spacing: 0px;
    border: 4px inset #444;
}
.box {
    border: 3px outset #959595;
    width:25px;
    height: 25px;
    background-color: #dddddd;
    cursor: pointer;
}
.bomb {
    color: red;
    /*	font-weight:bold;*/
    font-family: impact;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.zero {
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.one {
    color: blue;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.two {
    color: green;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.three {
    color:red;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.four {
    color: purple;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.five {
    color: orange;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.six {
    color: brown;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.seven {
    color: grey;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.eight {
    color: olive;
    background-color: #E9E9E9;
    border-right:1px dotted #000000;
    border-bottom:1px dotted #000000;
    width:26px;
    height: 26px;
}
.center {
   ...

JavaScript

//initialize center
		var bombCount = 0;
		//array of bomb locations
		var bomb = [];
		//sorry gotta press start
		var gameOn = false;
		//keeps evrything nice and colorful
		var classList = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
		//time place-holder
		var timePast = 0;
		//amount of bombs
		var bombAmount = 10;
		//total amount of rows
		var rowAmount = 10;
		//isn't it obvious?
		var columnAmount = 10;
		//amount of cells (assigned after <table> is built)
		var cellAmount;
		//initialize array needed for expanding properly
		var alreadySetAsZero = [];

		var newFlippedCount = document.getElementsByClassName('flipped');

		for (var i = 0; i < bombAmount; i++) {
		    bomb[i] = 0;
		}
		//fill table
		write();

		function write() {

		    //empty table ( dont make multiple games)
		    document.getElementById("grid").innerHTML = "";

		    //clears text under start button
		    document.getElementById("youSuck").innerHTML = "";

		    //gamebox initlazation
		    var gameBox = "";

		    //ten rows
		    for (i = 0; i < rowAmount; i++) {
		        gameBox += "<tr>";
		        //ten columns
		        for (var j = 0; j < columnAmount; j++) {
		            //produce id value
		            var idValue = (i * rowAmount) + j;
		            //write cell
		            gameBox += "<td class = 'box' id = '" + idValue + "' onclick = 'processClick(this);' ></td>";
		        }
		        gameBox += "</tr>";
		    }
		    //assign cellAmount
		    cellAmount = rowAmount * columnAmount;

		    //now to actually write it
		    document.getElementById("grid").innerHTML = gameBox;

		}

		function timer() {
		    if (gameOn) {
		        timePast++;
		        document.getElementById("timer").innerHTML = timePast;
		        timeoutID = window.setTimeout(timer, 1000);
		    }
		}

		function start() {

		    //reset
		    write();
		    timePast = 0;
		    document.getElementById("flipped").innerHTML = newFlippedCount.length;

		    //start the...