JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="darkCell">
            <div class="blackCoin" ondblclick="makeKing(this)"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
    </tr>
    <tr>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
    </tr>
    <tr>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
        <td class="darkCell">
            <div class="blackCoin"></div>
        </td>
        <td class="lightCell"></td>
    </tr>
    <tr>
        <td class="lightCell"></td>
        <td class="darkCell"></td>
        <td class="lightCell"></td>
        <td class="darkCell"></td>
        <td class="lightCell"></td>
        <td class="darkCell"></td>
        <td class="lightCell"></td>
        <td class="darkCell"></td>
    </tr>
    <tr>
        <td class="darkCell"></td>
        <td class="lightCell"></td>
        <td class="darkCell"></td>
        <td...

CSS

table {
    border: 6px solid black;
    border-collapse: collapse;
    margin-top: 10px;
}
td {
    border: 3px solid black;
    width: 60px;
    height: 60px;
}
.lightCell {
    background-color: beige;
}
.darkCell {
    background-color: #A68064;
}
.blackCoin {
    border-radius: 50%;
    background-color: darkslategray;
    border: 10px solid black;
    height: 40px;
    width: 40px;
    cursor: move;
}
.redCoin {
    border-radius: 50%;
    background-color: lightcoral;
    border: 10px solid black;
    height: 40px;
    width: 40px;
    cursor: move;
}

JavaScript

function changeTurn() {
                if (playerTurn == "black") {
                    playerTurn = "red";
                } else if (playerTurn == "red") {
                    playerTurn = "black"
                }
            }

            function makeKing(obj) {
                obj.style.backgroundImage = "url('http://images.clipartpanda.com/black-crown-clipart-crown-md.png')";
            }

            $(init);

            function init() {
                $('.blackCoin').draggable();
                $('.redCoin').draggable();
            }