JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <table>
    <tbody>
        <tr>
            <td class="tile" id="pos1" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos2" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos3" onclick="draw(this); checkWinner();"></td>
        </tr>
        <tr>
            <td class="tile" id="pos4" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos5" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos6" onclick="draw(this); checkWinner();"></td>
        </tr>
        <tr>
            <td class="tile" id="pos7" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos8" onclick="draw(this); checkWinner();"></td>
            <td class="tile" id="pos9" onclick="draw(this); checkWinner();"></td>
        </tr>
    </tbody>
    </table>
    <div>
    <button>Clear</button>
    </div>
    </div>

CSS

#wrap{
            padding: 10px;
            font-family: sans-serif;
        }
        
        .tile{
            height: 40px;
            width: 40px;
            text-align: center;
            color: black;
        }
        
        #empty{
            background-color: white;
        }
        
        table, td{
            border: 1px solid black;
        }
        
        button{
            position: relative;
            left: 47px;
        }

JavaScript

$( document ).ready(function() {
    var counter = 0;
    function draw(elmt){
        if(elmt.innerHTML == "x" || elmt.innerHTML == "o")
        {
            //do nothing
        }
        else{
        if(counter==0){
            elmt.innerHTML = "x";
            counter = 1;
        }
        else{
            elmt.innerHTML = "o";
            counter = 0;
        }
        }
    }
        
    var x1 = document.getElementById("pos1");
    var x2 = document.getElementById("pos2");
    var x3 = document.getElementById("pos3");
    var x4 = document.getElementById("pos4");
    var x5 = document.getElementById("pos5");
    var x6 = document.getElementById("pos6");
    var x7 = document.getElementById("pos7");
    var x8 = document.getElementById("pos8");
    var x9 = document.getElementById("pos9");
        
    function checkWinner(){
            if(x1.innerHTML == "x" && x2.innerHTML == "x" && x3.innerHTML == "x" || x1.innerHTML == "o" && x2.innerHTML == "o" && x3.innerHTML == "o"){
                alert("Winner!")
            }
            else if(x1.innerHTML == "x" && x4.innerHTML == "x" && x7.innerHTML == "x" || x1.innerHTML == "o" && 4.innerHTML == "o" && x7.innerHTML == "o"){
                alert("Winner!")
            }
            else if(x1.innerHTML == "x" && x5.innerHTML == "x" && x9.innerHTML == "x" || x1.innerHTML == "o" && x5.innerHTML == "o" && x9.innerHTML == "o"){
                alert("Winner!")
            }
            else if(x2.innerHTML == "x" && x5.innerHTML == "x" && x8.innerHTML == "x" || x2.innerHTML == "o" && x5.innerHTML == "o" && x8.innerHTML == "o"){
                alert("Winner!")
            }
            else if(x3.innerHTML == "x" && x6.innerHTML == "x" && x9.innerHTML == "x" || x3.innerHTML == "o" && x6.innerHTML == "o" && x9.innerHTML == "o"){
                alert("Winner!")
            }
            else if(x3.innerHTML == "x" && x5.innerHTML == "x" && x7.innerHTML == "x" || x3.innerHTML == "o" && x5.innerHTML == "o" &&...