JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Jogo da Forca</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="src/tictactoe.js"></script>
	<script type="text/javascript" src="src/mostrar.js"></script>
	<link rel="stylesheet" type="text/css" href="src/style.css">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
	<div class="container">
		<div id="main">
			<div id="logoDiv"></div>
			<div id="headerDiv">
				<ul id="navbar">
					<li id="liIndex" style="background-color: #CCC;"><a href="javascript:mostrarIndex();" id="indexNavbar">Página Inicial</a></li>
					<li id="liTutorial"><a href="javascript:mostrarTutorial();" id"tutorialNavbar">Tutorial</a></li>
					<li id="liJogar"><a href="javascript:mostrarJogar();" id="jogoNavbar">Jogar</a></li>
				</ul>

			</div>
			<div id="bodyDiv">
				<article id="index">
					<p>Bem vindo <span id="mostrarNome"></span> ao Jogo da Velha, descubra quais são as palavras antes que suas tentativas acabem.</p>
					<p>Caso não saiba jogar, clique na aba <b>Tutorial</b> para aprender. Caso já saiba, clique em <b>Jogar</b> para começar a diversão.</p>
				</article>
				<article id="tutorial" style="display: none;">
					<p>Nesse tópico, você verá como jogar o Jogo da Forca.</p/=>
				</article>
				<article id="jogar" style="display: none;" align: "center">
					<p id="placar" class="text-center"><b>Placar:</b><br><span id="placarPlayer">0</span> vs IA <span id="placarIA">0</span></p>
					<div id="q" class="text-center">
						<div id="q0" class="quadrado" onClick="jogar(0);"></div>
						<div id="q1"...

CSS

button {
	color: #777;
	background-color: #EEE;
	border: 1px #EEE solid;
}
button:hover {
	color: #000;
	background-color: #DDD;
	border: 1px #CCC solid;
}	
ul#navbar {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #EEE;
	border: 1px #DDD solid;
}
li {
	float: left;
}
li a {
	color: #777;
	display: block;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
li a:hover {
	background-color: #DDD;
	color: #000; 
	transition-duration: 0.4s;
	text-decoration: none;
}
#main {
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	width: 550px;
	min-height: 500px;
	border: 1px #CCC solid;
	background-color: #F5F5F5;
}
#logoDiv {
	background-image: url("../src/logo.png");
	height: 200px;
	border-bottom: 1px #CCC solid;
}
#headerDiv {
	border-bottom: 1px #CCC solid;
}
#bodyDiv {
	margin: 10px;
}
#q{
    width: 240px;
    height: 240px;
	display: flex;
	margin: 0 auto;
    flex-wrap: wrap;
    align-content: flex-start;
	background: url("../src/grid.png");
}
.quadrado{
    width: 80px;
    height: 80px;
    margin: 0px;
    padding: 0px;
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
}

JavaScript

var q;
var i;
var vez = Math.floor(Math.random() * (2) + 1);  // 1 para player / 2 para IA
var randomIA;
var posicaoOcupada;
var fimJogo = 0;
var flag = 0;
var v = new Array(9);   // 1 para player / 2 para IA
if(vez == 2)
    jogarIA();
function jogar(q) {
   posicaoOcupada = false; 
    switch(q) {
        case 0:
            if(v[0] != 1 || v[0] != 2) {
                v[0] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 1:
            if(v[1] != 1 || v[1] != 2) {
                v[1] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 2:
            if(v[2] != 1 || v[2] != 2) {
                v[2] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 3:
            if(v[3] != 1 || v[3] != 2) {
                v[3] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 4:
            if(v[4] != 1 || v[4] != 2) {
                v[4] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 5:
            if(v[5] != 1 || v[5] != 2) {
                v[5] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 6:
            if(v[6] != 1 || v[6] != 2) {
                v[6] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 7:
            if(v[7] != 1 || v[7] != 2) {
                v[7] = 1;
            }
            else
                posicaoOcupada = true;
        break;
        case 8:
            if(v[8] != 1 || v[8] != 2) {
                v[8] = 1;
            }
            else
                posicaoOcupada = true;
        break;
    }
    if(posicaoOcupada == true)
        document.getElementById("alerta").style.display = "";
    else if(posicaoOcupada == false) {
        document.getElementById("q" +...