JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tic-tac-toe">
      <div class="x"></div>
      <div class="o"></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

CSS

.tic-tac-toe {
    display: block;
    width: 109pt;
    height: 109pt;
    text-align: center;
    margin: auto;
}
.tic-tac-toe div {
    width: 32pt;
    height: 26pt;
    font-family: monospace;
    font-weight: bold;
    padding-top: 6pt;
    background-color: #555;
    float: left;
    margin: 0;
    -moz-box-shadow: 3px 3px 4px #909090;
    -webkit-box-shadow: 3px 3px 4px #909090;
    box-shadow: 3px 3px 4px #909090;
    color: white;
}
.tic-tac-toe > div.x:before {
    content: 'X';
}
.tic-tac-toe > div.o:before {
    content: 'O';
}
.tic-tac-toe div:nth-child(1),
.tic-tac-toe div:nth-child(4),
.tic-tac-toe div:nth-child(7) {
    margin-right: 6pt;
}

JavaScript

$('.tic-tac-toe div').click(function(){
    // Escape if class is already set:
    if($(this).hasClass('x o'))
        return;
   
    // Set the class
    var mark = Math.random() >= 0.5 ? 'o' : 'x';
    $(this).addClass(mark);
    
});