JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>♜</td><td>♞</td><td>♝</td><td>♛</td><td>♚</td><td>♝</td><td>♞</td><td>♜</td>
    </tr>
    <tr>
        <td>♟</td><td>♟</td><td>♟</td><td>♟</td><td>♟</td><td>♟</td><td>♟</td><td>♟</td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td>♙</td><td>♙</td><td>♙</td><td>♙</td><td>♙</td><td>♙</td><td>♙</td><td>♙</td>
    </tr>
    <tr>
        <td>♖</td><td>♘</td><td>♗</td><td>♕</td><td>♔</td><td>♗</td><td>♘</td><td>♖</td>
    </tr>
</table>

CSS

body {
    margin: 6px;
    border: 20px solid white;
    outline: 1px solid #808080;
}

table {
    background: #222;
    text-align: center;
    border: 2px solid black;
    border-spacing: 2px;
}

td {
    background: white;
    width: 165px;
    height: 97px;
    font-size: 400%;
}

tr:nth-child(odd) td:nth-child(even) {
    background-image: -webkit-linear-gradient(#FFFFFF, #EEEEEE);
    background-image: linear-gradient(#FFFFFF, #EEEEEE);
}

tr:nth-child(even) td:nth-child(odd) {
    background-image: -webkit-linear-gradient(#CCCCCC, #EEEEEE);
    background-image: linear-gradient(#CCCCCC, #EEEEEE);
}