JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <table>
            <tbody>
                <tr>
                    <td>abacaxi</td>
                    <td>pera</td>
                    <td>uva</td>
                </tr>
                <tr>
                    <td>monza</td>
                    <td>corsa</td>
                    <td>fox</td>
                </tr>
                <tr>
                    <td>cama</td>
                    <td>mesa</td>   
                    <td>banho</td>
                </tr>
            </tbody>
        </table>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

table {
    box-shadow: 0 0 6px 2px #ccc;
    padding: 10px 12px;
    margin: 10%;
}

td {
    font-family: sans-serif;
    height: 40px;
    text-align: center;
    transition: all 200ms ease-in;
    width: 150px;
}

td:hover {
    cursor: pointer;
    text-shadow: 0 0 6px #999;
}

.select {
    color: #ccc;
    background: rgba(0,0,0,.8);
}

JavaScript

$(document).ready(function(){
    $('td').on('click', function(){
        $(this).toggleClass('select').fadeIn('slow');
    });
});