JSFiddle - React, Tailwind, and code Playground

HTML

<body>


<div id="game-wrap">
	
	<div class="row">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</div>

	<div class="row">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</div>

	<div class="row">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</div>

</div>

<div id="panel">
	<input type="text" id="player-1-inp" placeholder="Enter player 1">
	<input type="text" id="player-2-inp" placeholder="Enter player 2">
	<button id="playButton">Play!</button>
	<h1 id="board"></h1>
</div>

CSS

body{
background: #323232;
}

#game-wrap{
	width: 450px;
	height: 455px;
	margin: 0 auto;
	background: gray;
	margin-top: 50px;
	border-left: 5px solid gray;
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
}

.row{
	width: 100%;
	height: 150px;
}
.col{
	width: 32%;
	height: 145.5px;
	border: 3px solid white;
	float: left;
	text-align: center;
	font-size: 150px;
	font-family: helvetica;
	color: white;
	cursor: pointer;
}
.matched{
	color: maroon;
}
.player-1-color{
	color: maroon;
}
.col:nth-child(1){
	border-left: none;
}
.col:nth-child(3){
	border-right: none;
}

.row:nth-child(1) .col{
	border-top: none;
	margin-top: 3px;
}
.row:nth-child(3) .col{
	border-bottom: none;
	margin-bottom: 3px;
}
#panel{
	width: 435px;
	padding: 10px;
	margin: 0 auto;
	background: brown;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
#board{
	font-size: 30px;
	font-family: helvetica;
	color: whitesmoke;
	margin-top: 10px;
}

JavaScript

var player1Name="" , player2Name="", turn = "";
var grid =  [[0,0,0],[0,0,0],[0,0,0]];
var hasWinner = 0, moveCount=0;

function boardMsg(x){
	return $("#board").text(x);
}

function setTurn(){
	var r = Math.floor((Math.random() * 2) + 1);
	hasWinner=0;
	if(r==1){
		turn = player1Name;
		boardMsg(player1Name+"'s turn now!");
	}
	else{
		turn = player2Name;
		boardMsg(player2Name+"'s turn now!");
	}
}

function init(){
		turn = "";
		grid =  [[0,0,0],[0,0,0],[0,0,0]];
		boardMsg("");
		$(".col").map(function() {
    		$(this).text("");
		}).get();
		hasWinner = 0;
		moveCount=0;
}

$("#playButton").click(function (){

	if(hasWinner==1){
		init();
	}

	player1Name = $("#player-1-inp").val();
	player2Name = $("#player-2-inp").val();

	if(player1Name=="" || player2Name==""){
		alert("Please set player all the names.");
		return;
	}

	setTurn();


	

});

$(".col").click(function (){

	if(player1Name=="" || player2Name==""){
		alert("Please set player all the names.");
		return;
	}

	var row = $(this).parent().index();
	var col = $(this).index();

	if(grid[row][col]!==0){
		alert("This position is taken. Please try other position.");
		return;
	}
	if(hasWinner==1){
		alert("Please click play again");
		return;
	}

	if(turn==player1Name){
		moveCount++;
		$(this).text("O");
		grid[row][col] = 1;
		var ifWon = winnerCheck(1,player1Name);
		if(!ifWon){
			if(moveCount>=9){
				boardMsg("Match Drawn!");
				moveCount=0;
				$("#playButton").text("Play again");
				hasWinner=1;
				return;
			}else{
				turn = player2Name;
				boardMsg(player2Name+"'s turn now!");
			}
			return;	
		}
		else{
			return;
		}
		
	}
	else if(turn==player2Name){
		moveCount++;
		$(this).text("X");
		grid[row][col] = 2;
		var ifWon = winnerCheck(2,player2Name);
		if(!ifWon){
			if(moveCount>=9){
				boardMsg("Match Drawn!");
				moveCount=0;
				$("#playButton").text("Play again");
				hasWinner=1;
				return;
			}else{
				turn = player1Name;
				boardMsg(player1Name+"'s turn...