JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="page_title">Križci in Krožci</div>
	<table>
		<tbody>
			<tr id="_3">
				<td id="_1_3" class="neutral"></td>
				<td id="_2_3" class="neutral"></td>
				<td id="_3_3" class="neutral"></td>
			</tr>
			<tr id="_2">
				<td id="_1_2" class="neutral"></td>
				<td id="_2_2" class="neutral"></td>
				<td id="_3_2" class="neutral"></td>
			</tr>
			<tr id="_1">
				<td id="_1_1" class="neutral"></td>
				<td id="_2_1" class="neutral"></td>
				<td id="_3_1" class="neutral"></td>
			</tr>
		</tbody>
	</table>
		<div id="result_holder">
			<div id="result_holder_player"><span>Igralec: </span><span id="player_score">0</span></div><span> | </span>
			<div id="result_holder_cpu"><span>CPU: </span><span id="cpu_score">0</span></div>
		</div>
		
			<div id="link_holder">
			<a target="_blank" href="https://www.dropbox.com/sh/6lw2o0koy7s340j/AABUUV7fRD896jm2olSGD_8Aa?dl=0">
				Vir - GM
			</a>
			</div>
</html>

CSS

body {
	background-color: black;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	height: 500px;
	width: 500px;
	position: absolute;
	margin-top: -250px;
	margin-left: -250px;
	top: 50%;
	left: 50%;
}
tbody {
	height: 100%;
	width: 100%;
}
tr, td {
	height: 33.3333%;
}
td {
	width: 33.3333%;
}
#_2 {
	border-bottom: 5px solid white;
	border-top: 5px solid white;
}
#result_holder {
	width: 600px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -300px;
	font-size: 50px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: white;
	text-align: center;
}
#page_title {
	position: absolute;
	top: 20px;
	left: 50%;
	margin-left: -200px;
	font-size: 60px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: white;
	text-align: center;
}

#result_holder_player, #result_holder_cpu {
	display: inline-block;
}
tr td:nth-child(2) {
	border-left: 5px solid white;
	border-right: 5px solid white;
}
.neutral {
	background-color: transparent;
	cursor: pointer;
	opacity: 0;
}
.player {
	background-image: url("http://shrani.si/f/3S/iT/1SbB4t7f/xsmall.png");
	background-size: 140px 140px;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
	-moz-transition: opacity 0s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
	opacity: 1;
	z-index: 1000;
}
.cpu {
	background-image: url("http://shrani.si/f/1r/q2/qZjseHB/circlesmall.png");
	background-size: 140px 140px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
	transition: opacity 0.8s ease-in;
    -ms-transition: opacity 0.8s ease-in;
	-moz-transition: opacity 0s ease-in;
    -webkit-transition: opacity 0.8s ease-in;
}
@media all and (max-height: 650px) {
  table {
    height: 300px;
	width: 300px;
	margin-left: -150px;
	margin-top: -150px;
  }
  .player, .cpu {
	background-size: 67px 67px;
  }
  #result_holder {
	bottom: 35px;
  }
}
#link_holder a {
	position:...

JavaScript

/* @@@ (c) Gal M. @@@ */

var valy;
var valx;
var valxy;
var valyx;
var potential_fill_x;
var potential_fill_y;
var potential_fill_xy;
var potential_fill_yx;
var turn_number = 1;
var value_array_x;
var value_array_y;
var value_array_xy;
var value_array_yx;
	
var add_score_to_player = function ()
{
	var alter_zone = $("#player_score");
	alter_zone.text(parseInt(alter_zone.text()) + 1);
}

var turn_process = function (turn_n)
{
	if ((turn_n % 2) === 0)
	{
		cpu_turn();
	}
}

var add_score_to_cpu = function ()
{
	var alter_zone = $("#cpu_score");
	alter_zone.text(parseInt(alter_zone.text()) + 1);
}

// funkcija, ki pretvori ime class-a v vrednost (neutral --> 0 , player --> 1, cpu --> 2)
var class_transform = function(class_string)
{
	if (class_string.hasClass("neutral")) {return 0}
	else if (class_string.hasClass("player")) {return 1}
	else if (class_string.hasClass("cpu")) {return 2}
	else { alert("sumtin's fecked up") };
}

var field_reset = function ()
{
	
	$("td").removeClass("player").addClass("neutral");
	$("td").removeClass("cpu").addClass("neutral");
}

var create_array_field = function ()
{
	var value_array = new Object(4);
	for (i=0; i < 4; i++) 
	{
		value_array[i] = new Object(4);
	}
	value_array[1][1] = class_transform ($("#_1_1"));
	value_array[1][2] = class_transform ($("#_1_2"));
	value_array[1][3] = class_transform ($("#_1_3"));
	value_array[2][1] = class_transform ($("#_2_1"));
	value_array[2][2] = class_transform ($("#_2_2"));
	value_array[2][3] = class_transform ($("#_2_3"));
	value_array[3][1] = class_transform ($("#_3_1"));
	value_array[3][2] = class_transform ($("#_3_2"));
	value_array[3][3] = class_transform ($("#_3_3"));
	return value_array;
}

var random_fill = function ()
{
	var x = Math.floor((Math.random()*3)+1);
	var y = Math.floor((Math.random()*3)+1);
	var potential_fill = "#_"+String(x)+"_"+String(y);
	if (!$("td").hasClass("neutral"))
	{
		return;
	}
	else if...