JSFiddle - React, Tailwind, and code Playground

by Afzaal Ahmad Zeeshan

HTML

<div class="vicvacvoe">
    <table>
        <tr>
            <td class="line1 line4 line7"></td>
            <td class="line1 line5"></td>
            <td class="line1 line6 line8"></td>
        </tr>
        <tr>
            <td class="line2 line4"></td>
            <td class="line2 line5 line7 line8"></td>
            <td class="line2 line6"></td>
        </tr>
        <tr>
            <td class="line3 line4 line8"></td>
            <td class="line3 line5"></td>
            <td class="line3 line6 line7"></td>
        </tr>
    </table>
</div>

CSS

.vicvacvoe {
    width: 400px;
    height: 400px;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
}

.vicvacvoe table {
    border: 2px solid #000;
    width: 100%;
    height: 100%;
    padding: 0; margin: 0;
}

.vicvacvoe table tr td {
    border: 1px solid #999;
    padding: 5%;
    margin: 0;
    width: 33%;
    height: 33%;
}

JavaScript

var vic = $('.vicvacvoe table tr td');
    var player = 1;
    var tick = '✓';
    var cross = 'X';
    var user1 = [];
    var user2 = [];
    vic.click(function () {
        var className = $(this).attr('class');
        if (className != 'dead') {
            // A new board place to write on...
            // Now do the processes here...
            if (player == 1) {
                // First player!
                var cArray = className.split(' ');
                for (i = 0; i < cArray.length; i++) {
                    for (j = 0; j < user1.length; j++) {
                        // check for each class
                        if (user1[j] != cArray[i]) {
                            user1.push(cArray[i]);
                        }
                    }
                }
            } else {

            }
            $(this).text('Works!');
            $(this).attr('class', 'dead');
        }
    });