JSFiddle - React, Tailwind, and code Playground
HTML
<table cellspacing="0" cellpadding="0">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
CSS
tr {
transition: transform 1s linear 0s, opacity 1s linear 0s, font-size 0.5s linear 0.5s;
}
tr.deleted {
transform: translateX(100%);
opacity: 0;
font-size: 0;
}
table {
width: 500px;
overflow: hidden;
}
tr {
background-color: gainsboro;
}
JavaScript
$('tr').on('click', function() {
$(this).addClass('deleted');
});