JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<div id="head">
			<div id="btn">New game</div>
			<div id="nc"><div></div><div></div><div></div></div>
			<div id="score">Step: <span></span></div>
		</div>
		<div id="field"><div id="00" class=""></div><div id="01" class=""></div><div id="02" class=""></div><div id="03" class=""></div><div id="04" class=""></div><div id="05" class=""></div><div id="06" class=""></div><div id="07" class=""></div><div id="08" class=""></div>
		<div id="10" class=""></div><div id="11" class=""></div><div id="12" class=""></div><div id="13" class=""></div><div id="14" class=""></div><div id="15" class=""></div><div id="16" class=""></div><div id="17" class=""></div><div id="18" class=""></div>
		<div id="20" class=""></div><div id="21" class=""></div><div id="22" class=""></div><div id="23" class=""></div><div id="24" class=""></div><div id="25" class=""></div><div id="26" class=""></div><div id="27" class=""></div><div id="28" class=""></div>
		<div id="30" class=""></div><div id="31" class=""></div><div id="32" class=""></div><div id="33" class=""></div><div id="34" class=""></div><div id="35" class=""></div><div id="36" class=""></div><div id="37" class=""></div><div id="38" class=""></div>
		<div id="40" class=""></div><div id="41" class=""></div><div id="42" class=""></div><div id="43" class=""></div><div id="44" class=""></div><div id="45" class=""></div><div id="46" class=""></div><div id="47" class=""></div><div id="48" class=""></div>
		<div id="50" class=""></div><div id="51" class=""></div><div id="52" class=""></div><div id="53" class=""></div><div id="54" class=""></div><div id="55" class=""></div><div id="56" class=""></div><div id="57" class=""></div><div id="58" class=""></div>
		<div id="60" class=""></div><div id="61" class=""></div><div id="62" class=""></div><div id="63" class=""></div><div id="64" class=""></div><div id="65" class=""></div><div id="66" class=""></div><div id="67" class=""></div><div id="68" class=""></div>
		<div id="70"...

CSS

<!--[if IE]>
			.red{
				background-color: #f59 !important;
				}
			.yellow{
				background-color: yellow !important;
				}
			.green{
				background-color: #6f9 !important;
				}
			.blue{
				background-color: #69f !important;
				}
			.violet{
				background-color: violet !important;
			}
	<![endif]-->
  * {
	font-family:Sans-serif;
}
#container {
	margin:0 auto;
	width:474px;
	border:double 3px #99f;
	}
#head{
	background-color:#bce;
	-moz-user-select:none;
	}
#head div{
	width:33%;
	border:double 3px #99f;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	}
#btn{
	cursor:pointer;
	}
#btn:hover{
	background-color:#fff;
	}
#nc div{
	height:50px;
	width:50px;
	border-radius: 20%;
	background-color:white;
	border:dotted 1px grey;
	margin:0;
}
#score {
	cursor:default;
	}
#field{
	margin:0 auto;
	background-color:#bce;
	border:double 3px #99f;
	width:468px;
	height:468px;
	}
#field div{
	height:50px;
	width:50px;
	border:dotted 1px grey;
	float:left;
	border-radius: 20%;
	cursor:pointer;
	background-color:white;
	}
.red{
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #fcc 0%, #f00 100%);
	}
.yellow{
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ffd 0%, #fb0 100%);
	}
.green{
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #cfc 0%, #0f0 100%);
	}
.blue{
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ccf 0%, #00f 100%);
	}
.violet{
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #c9f 0%, #306 100%);
}

JavaScript

var b = document.getElementById("btn");
		var clsCor = "";//цвет
		b.onclick = function()
		{
			document.getElementsByTagName("span")[0].innerHTML = 0;
			var coArr = ["red","yellow","blue","green","violet"];
			var cls = "";//значение атрибута класс
			var dstry = 0;//уничтожались ли линии
		
			for (var i = 0; i<9;i++)//проверка существования шариков и очистка
			{
				for (var j = 0; j<9;j++ )
				{
					if (document.getElementById(i+""+j).getAttribute("class") != "")
					{
						document.getElementById(i+""+j).setAttribute("class","");
						if (clsCor)
						{
							clsCor.style.borderColor = "grey";
							clsCor.style.borderStyle = "dotted";
						}
					}
				}
			}

			var cntr1 = 0;//добавление первых 3 шариков на поле
			var cntr2 = 0;
			while (cntr1 < 3)
			{
				while(cntr2 < 1)
				{
					var m = document.getElementById(Math.floor( Math.random()*(parseInt(+9,10)-1+1) )+""+Math.floor( Math.random()*(parseInt(+9,10)-1+1) ));
					if (!m.getAttribute("class"))
					{
						m.setAttribute("class",coArr[Math.floor( Math.random()*(5-1+1) )]);
						cntr2++;
					}
				}
				cntr1++;
				cntr2=0;
			}//

			var nc = document.getElementById("nc").getElementsByTagName("div");//добавление шариков в поле "следующие"
			for (var i=0; i<3; i++)
			{
				nc[i].setAttribute("class",coArr[Math.floor( Math.random()*(5-1+1) )]);
			}//
			
			var Hr = [];
			var Vr = [];
			var Dr = [];
			var Dl = [];
			
			//==
			destroy = function()
			{
				for (var i = 0;i<2;i++)//горизонталь и вертикаль
				{
					for (var l=9;l>4;l--)
					{
						for (var k=0;k<=(9-l);k++)
						{
							for (var j = 0; j<9;j++)
							{loop1:
								if (document.getElementById(j+""+k).getAttribute("class"))
								{
									if (i == 0) //0 - горизонталь
									{//j - номер строки, k - номер столбца, l - количество шариков
										var chk = 0;
										var chk1 = 0;
										for (var i2=k; i2<(l+k); i2++)
										{
											if...