JSFiddle - React, Tailwind, and code Playground
HTML
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<table>
<tbody>
<tr class="line-no">
<td colspan="2">
Line 1
</td>
<td colspan="2">
Line 1
</td>
</tr>
<tr class="change">
<td class="change-status">
-
</td>
<td class="diff-content left">{{<del>o</del>therpeople2|Joseph Stone<del>}}</del></td>
<td class="change-status">
+
</td>
<td class="diff-content right">{{<ins>O</ins>ther<ins> </ins>people2|Joseph Stone<ins> (disam</ins>bigu<ins>ation)}}</ins></td>
</tr>
<tr class="change">
<td class="change-status">
-
</td>
<td class="diff-content left"><del><!-- This article was automatically created by [[User:polbot]] from http://</del>bi<del>o</del>gu<del>ide.congress.gov/scripts/biodisplay.pl?index=S000960. The prose may be stilted, and there may be grammatical and Wikification errors. Please improve in any way you see fit. --></del>'''Joseph Champlin Stone''' (<del>[[</del>July 30<del>]], [[</del>1829<del>]]</del> -...
CSS
td {
border: solid 1px;
}
.nochange {
background: #eee;
}
.change .diff-content.left {
background-color: #ffa;
}
.change .diff-content.right {
background-color: #afa;
}
.diff-content del {
color: red;
text-decoration: underline;
}
.diff-content ins {
color: #0a0;
text-decoration: underline;
}