JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="td_left"></td>
        <td class="td_right"></td>
    </tr>
    <tr>
        <td class="td_left"></td>
        <td class="td_right"></td>
    </tr>
    <tr>
        <td class="td_left"></td>
        <td class="td_right"></td>
    </tr>
    <tr>
        <td class="td_left"></td>
        <td class="td_right"></td>
    </tr>
    <tr>
        <td class="td_left"></td>
        <td class="td_right"></td>
    </tr>
</table>
<br/>
<table>
    <tr>
        <td>Left</td>
        <td>Right</td>
    </tr>
    <tr>
        <td><input type="text" id="txt_lColor"/></td>
        <td><input type="text" id="txt_rColor"/></td>
    </tr>
    <tr>
        <td>
            <button onclick="javascript:changeLeft();">change</button>
        </td>
        <td>
            <button onclick="javascript:changeRight();">change</button>
        </td>
    </tr>
</table>
<script>
    function changeLeft(){
        $(".td_left").css("backgroundColor", $("#txt_lColor").val());
    }
    
    function changeRight(){
        $(".td_right").css("backgroundColor", $("#txt_rColor").val());
    }
</script>

CSS

td
{
    width:65px;
    height: 18px;
    border:1px solid black;
    text-align:center;
}
input[type=text]
{
    width:55px;
}
}