JSFiddle - React, Tailwind, and code Playground

HTML

<div id="select-player" class="wrapper">
    <button id="vs-machine" class="ui-btn">VS. Machine</button>
    <p class="or-p"> or </p>
    <button id="vs-human" class="ui-btn" disabled="disabled">VS. Human (soon)</button>
  </div>
  <div id="select-stone" class="wrapper">
    <button id="x" class="ui-btn">X</button>
    <p class="or-p"> or </p>
    <button id="o" class="ui-btn">O</button>
  </div>
  <div id = "the-game" class="wrapper">
    <table>
    <tr>
      <td id ="c1" class="left-cell left-top-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id ="c2" class="mid-cell mid-top-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id="c3" class="right-cell right-top-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
    </tr>
    <tr>
      <td id="c4" class="left-cell left-mid-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id="c5" class="mid-cell mid-mid-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id="c6" class="right-cell right-mid-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
    </tr>
    <tr>
      <td id="c7" class="left-cell left-bottom-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id="c8" class="mid-cell mid-bottom-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
      <td id="c9" class="right-cell right-bottom-cell" onclick="showStoneOnClick(this.id); pcPlay();"></td>
    </tr>
    </table>
</div>

CSS

body{
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #333333
}

.wrapper{
  height: 500px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.or-p{
  margin: 1%;
}

.ui-btn{
  font-size: 1em;
}

/* game play style */
td{
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 4em;
}

/* left section */
.left-cell{
  border-right: 1px solid #000000;
}

.left-top-cell{
  border-bottom: 1px solid #000000;
}

.left-mid-cell{
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.left-bottom-cell{
  border-top: 1px solid #000000;
}

/* mid section */
.mid-cell{
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
}

.mid-top-cell{
  border-bottom: 1px solid #000000;
}

.mid-mid-cell{
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.mid-bottom-cell{
  border-top: 1px solid #000000;
}

/* right section */
.right-cell{
  border-left: 1px solid #000000;
}

.right-top-cell{
  border-bottom: 1px solid #000000;
}

.right-mid-cell{
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.right-bottom-cell{
  border-top: 1px solid #000000;
}

JavaScript

"use strict";

$(function(){
  $("#select-stone").hide();
  $("#the-game").hide();

  selectPlayer();
  selectStone();
});

// global vars
// player1 is human (when human vs pc)
var player1 = {
id: 0,
stone: "",
turn: 0
};
//player2 is pc (when human vs pc)
var player2 = {
id: 1,
stone: "",
turn: 0
};

var full_cells = [];

// vs pc or human
function selectPlayer() {
  $("#vs-machine").click(function(){
    $("#select-player").hide();
    $("#select-stone").show();
  });
}

// x or o for player1 only
function selectStone() {
  $("#x").click(function(){
    player1.stone = "x";
    player2.stone = "o";
    $("#select-stone").hide();
    $("#the-game").show();
  });

  $("#o").click(function(){
    player1.stone = "o";
    player2.stone = "x";
    $("#select-stone").hide();
    $("#the-game").show();
  });
}

function generalError(){
  alert("Something went wrong.");
  console.log("Error: something went wrong.");
}

function assignTurn(){ // not used
  player1.turn = Math.floor(Math.random() * 2);
  // player1 goes 1st
  if(player1.turn === 0){
    player2.turn = 1;
  }else if(player1.turn === 1){ // player2 goes 1st
    player2.turn = 0;
  }else{
    generalError();
  }
}

function whoIsFirst() {
  if(player1.turn === 0){
    return player1.id;
  }else if(player2.turn === 0){
    return player2.id;
  }else{
    generalError();
  }
}

function showStoneOnClick(clicked_id){ // only for player 1/ human
  if(checkForWin(win_states)){return;}

//  if($("#" + clicked_id).text() === ""){
if(full_cells.indexOf("#" + clicked_id) === -1){
    $("#" + clicked_id).html(player1.stone);
    full_cells.push("#" + clicked_id);
  }else{
    //do nothing
  }
}

function generateRandTile(){
  var random_cell = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
  var cell_id = "#c" + random_cell;

  //if($(cell_id).text() === ""){
  if(full_cells.indexOf(cell_id) === -1){
    console.log(cell_id + " right place");
    full_cells.push(cell_id);
    return (cell_id);
  }else{ // generate...