JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width:200px; height:200px;border: solid 1px black">
    <tr>
        <td class="cell1" onclick="clickedOn(this)"></td>
        <td class="cell2" onclick="clickedOn(this)"></td>
    </tr>
</table>
           
<script>
function clickedOn(elem)
{
    var bColor = getStyle(elem,'background-color');
    
    if( bColor.toUpperCase() =='#F0F0F5' || colorToHex(bColor).toUpperCase() =='#F0F0F5')
        elem.style.backgroundColor="blue";
    else
        alert("no");
}
    
function getStyle(el, styleProp) {
   if (el.currentStyle)
      var y = el.currentStyle[styleProp];
   else if (window.getComputedStyle)
      var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
   return y;
}    
    
function colorToHex(color) {
    if (color.substr(0, 1) === '#') {
        return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + '#' + rgb.toString(16);
};    
    
</script>

CSS

.cell1{
    background-color: #E0E0E5
}

.cell2{
    background-color: #F0F0F5
}