JSFiddle - React, Tailwind, and code Playground

by fresk

HTML

<table class="horse">
    <tr>
        <td>
            <input type="checkbox" name="horse-check" id="tog1" checked>
            <label for="tog1"></label>   
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog2">
            <label for="tog2"></label>
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog3">
            <label for="tog3"></label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="horse-check" id="tog4">
            <label for="tog4"></label>
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog5">
            <label for="tog5"></label>
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog6">
            <label for="tog6"></label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="horse-check" id="tog7">
            <label for="tog7"></label>
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog8">
            <label for="tog8"></label>
        </td>
        <td>
            <input type="checkbox" name="horse-check" id="tog9">
            <label for="tog9"></label>
        </td>
    </tr>
</table>

CSS

.horse {
    border-collapse: collapse;
    margin: 100px auto;
}

.horse td {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

.horse input {
    display: none;
}

.horse label {
    position: relative;
    display: block;
    width: inherit;
    height: inherit;
    cursor: pointer;
}

.horse label:after {
    content: "♘";
    position: absolute;
    top: 0; left: 0;
    display: none;
    width: inherit;
    height: inherit;
    color: red;
    text-align: center;
    font-size: 40px;
    line-height: 50px;
}

.horse input:checked ~ label:after {
    display: block;
}