JSFiddle - React, Tailwind, and code Playground

HTML

<table id="mytest">
    <thead>
        <tr>
            <th>First</th>
            <th>Second</th>
            <th>Third</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some stuff</td>
            <td>Foobar</td>
            <td>..is watching you</td>
        </tr>
    </tbody>
</table>

CSS

td, td img { vertical-align:top; } 
td, th{
    width: 110px;
}

JavaScript

$(document).ready(function(){
    var myInsert = function(row){
        var $test = $('#mytest'),
            $row  = $(row),
            $tr   = $row.slice(0),
            col   = 0;
        
        var fade = setInterval(function(){
            $tr.css('background-color', 'rgb(255,255,'+col+')');
            if(col < 255)
               col+=5;
            else clearInterval(fade);
        }, 33);
        
        $test.append($row);
    };
    
    var newrow = '<tr><td>new1</td><td>new2</td><td>new3</td></tr>';
    
    $(document.body).bind('click', function(){
        myInsert(newrow); 
    });
});