JSFiddle - React, Tailwind, and code Playground

HTML

<TABLE>
<TR> 
 <TD class="waterClick"></TD> 
 <TD class="groundClick"></TD> 
 <TD class="treeClick"></TD> 
</TR>
</TABLE>
</br>
<table> <tr> <td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td> </tr><tr> <td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td> </tr><tr> <td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div class="ground"></div> </td><td> <div...

CSS

.dirt {
    background: #444444;
    width: 15px;
    height: 15px;
}

.ground {
    background: #964922;
    width: 15px;
    height: 15px;
}

.tree {
    background: #0C9B00;
    width: 15px;
    height: 15px;
}

.null {
    background: #000000;
    width: 15px;
    height: 15px;
}

.water {
    background: #2B35C4;    
    width: 15px;
    height: 15px;
}

.dirtClick {
    background: #444444;
    width: 30px;
    height: 30px;
}

.groundClick  {
    background: #964922;
    width: 30px;
    height: 30px;
}

.treeClick  {
    background: #0C9B00;
    width: 30px;
    height: 30px;
}

.nullClick  {
    background: #000000;
    width: 30px;
    height: 30px;
}

.waterClick  {
    background: #2B35C4;    
    width: 30px;
    height: 30px;
}

JavaScript

$(document).ready(function() {

$(".treeClick").click (function () {
    $("table").mousedown (function () {
        $('.ground').live("hover", function () {
            $(this).addClass("tree");
        });    
        $('.water').live("hover", function () {
            $(this).addClass("tree");
        });        
    });
    $("table").mouseup (function () { 
        $('.ground').die();
        $('.water').die();
    });
});

$(".waterClick").click (function () {
    $("table").mousedown (function () {
        $('.ground').live("hover", function () {
            $(this).addClass("water");
        });    
        $('.tree').live("hover", function () {
            $(this).addClass("water");
        });        
    });
    $("table").mouseup (function () { 
        $('.ground').die();
        $('.tree').die();
    });
});

$(".groundClick").click (function () {
    $("table").mousedown (function () {
        $('.water').live("hover", function () {
            $(this).addClass("ground");
        });    
        $('.tree').live("hover", function () {
            $(this).addClass("ground");
        });        
    });
    $("table").mouseup (function () { 
        $('.water').die();
        $('.tree').die();
    });
});

});