JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<table>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<select id="colors">
    <option value="">Color</option>
    <option value="tomato">Red</option>
    <option value="orange">Orange</option>
    <option value="gold">Yellow</option>
    <option value="yellowGreen">Green</option>
    <option value="skyBlue">Aqua</option>
    <option value="cornflowerblue">Blue</option>
    <option value="mediumslateblue">Purple</option>
</select>

CSS

*{
    -webkit-box-sizing:border-box;
}
table{
    border-collapse:collapse;
}
td {
    border:solid 1px #666;
    width:50px;
    height:50px;
}
.rainbow {
}

.rainbow[data-color=red]{
    background:tomato;
}
.rainbow[data-color=orange]{
    background:orange;
}
.rainbow[data-color=yellow]{
    background:gold;
}
.rainbow[data-color=green]{
    background:yellowGreen;
}
.rainbow[data-color=aqua]{
    background:skyBlue;
}
.rainbow[data-color=blue]{
    background:cornflowerblue;
}
.rainbow[data-color=purple]{
    background:mediumslateblue;
}

JavaScript

$$('td').addEvents({
    'click':function(){
        this.setStyles({
            'background-color':$('colors').value
        });
    }
});