JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div id="dashboard">
	<div>
    <span>How large is your grid?</span>
    <select id="size">
    	<option value="6">6 - Easy</option>
    	<option value="7">7 - Easy</option>
    	<option value="8">8 - Easy</option>
    	<option value="5">5 - Intermediate</option>
		<option value="9">9 - Intermediate</option>
		<option value="10">10 - Intermediate</option>
		<option value="3">3 - Expert</option>
		<option value="4">4 - Expert</option>
    </select>
    <br />
    <span>Which icon would you like?</span>
	<select id="mark">
		<option value="o">Traditional O</option>
		<option value="x">Traditonal X</option>
		<option value="check">Check-Mark</option>
		<option value="nick">Nicolas Cage</option>
	</select>
	<br />
    <input type="button" id="go" value="Create Board / Reset" />
    </div>
    <p id="alert">Alerts Live Here</p> 
</div>
<table id="board">
<tr><td>Our board lives here.</td></tr>
</table>
</body>

CSS

*{
  	margin:0;
  	padding:0;
  }
  html{
  	font-size:1.5em;
  }
	body{
	font-family:"Lucida Console", Monaco, monospace;
	}
	span{
		margin:10px;
		line-height:1.5em;
	}
	td{
		border-right:3px solid #000;
		border-bottom:3px solid #000;
		width:48px;
		height:48px;
		margin-top:16px;
	}
	td:last-child{
		border-right:none;
	}
	tr:last-child td{
		border-bottom:none;
	}
	table{
		padding:25px;
		margin:0 auto;
		cursor:pointer;
		box-shadow:0 5px 15px #999;
		display:hidden;
	}
	#go{
		padding:10px;
		margin:0 auto;
		float:right;
	}
	#dashboard{
		background:#CCC;
		padding:15px;
		border:1px solid #000;
		box-shadow:0 5px 15px #000;
	}
	#alert{
		font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
		color:#FFF;
		width:"100%";
		text-align:right;
		background:#131313;
		padding:5px;
		margin:5px;
		text-align:center;
		border-radius:15px;
		width:600px;
	}
	#title{
		float:right;
		display:block;
	}
	.check{ background:url("http://sinsysonline.com/check.png"); }
	.x{ background:url("http://sinsysonline.com/x.png"); }
	.o{ background:url("http://sinsysonline.com/o.png"); }
	.nick{ background:url("http://sinsysonline.com/nick.jpg"); }
	.comp{ background:url("http://sinsysonline.com/comp.jpg"); }

JavaScript

// GLOBAL VARS
var b = [], v, s, f, win;

// INITIAL START GAME FUNCTION //
$("#go").click(function go(){

	// Redeclare our vars for the new board values //
    var s = parseInt($("#size").val());
    	v=$("#mark").val();
    	b=[],
    	f=Math.random();

    // Make a new board and array based on our submitted values //
    $('#board tr').remove();
    for (var i=0;i<s;i++) {
    	var t=[];
        var $tr = $('<tr />').data('index', i + 1);
        for (var j=0;j<s;j++) {
        	t[j]="";
            $('<td />', { id: 'r' + i +'_c' + j }).data('index', j + 1).appendTo($tr);
        }
        b.push(t);
        $("#board").append($tr);
    }
    // DETERMINE FIRST PLAYER TO MOVE //
    if (f>=0.5){randomMove();}
	win=Math.floor(Math.sqrt(b.length)*2);
	$('#alert').text("You must get "+win+" in a row.");
});

// CREATE A PLAYER CLICK EVENT //
$("#board").on('click','td',function () {
    var $td=$(this),
        pc=$td.data('index')-1,
        pr=$td.parent().data('index')-1;
    if($td.hasClass('comp')){
    	$('#alert').text("The cpu has already gone there.");
    } else if($td.hasClass(v)){
    	$('#alert').text("You already went there.");
    } else {
	    b[pr][pc]="X";
	    $td.addClass(v);
	    randomMove();
	    testWin();
	    $('#alert').text("You must get "+win+" in a row.");
	}
});

// RANDOM COMPUTER MOVE (if initial turn is its) //
function randomMove(){
	var cs=b.length,
		cr=Math.floor((Math.random()*cs)+1)-1,
		cc=Math.floor((Math.random()*cs)+1)-1;
	if(b[cr][cc]===""){ 
		$('#r'+cr+'_c'+cc).addClass('comp');
		b[cr][cc]="O";
	} else { randomMove(); }
}

// IDENTIFY WINS
function testWin() {
    var len=b.length, r=0, c=0, dr=0, dl=0;
    for(var i=0;i<len;i++){
        for(var j=0;j<len;j++){
            (b[j][i]==="X") ? c++ : c=0;
            (b[i][j]==="X") ? r++ : r=0;
        	if(b[i][j]==="X" && i<len-win+1){ dr=0; dl=0;
        		for(var z=0;z<win;z++){ 
        			(b[i+z][j+z]==="X") ? dr++ : dr=0;
        			(b[i+z][j-z]==="X") ? dl++...