JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="red">red</td>
        <td class="lime">lime</td>
        <td class="blue">blue</td>
    </tr>
      <tr>
        <td class="yellow">yellow</td>
        <td class="cyan">cyan</td>
        <td class="magenta">magenta</td>
    </tr>
      <tr>
        <td class="black">black</td>
        <td class="gray">gray</td>
        <td class="lightgray">lightgray</td>
    </tr>
</table>

CSS

body {
    background-color: #FFFFFF;    
}

table {
    margin: 25px;
    padding: 25px;
    background: #EEE;
}

tr {
    margin: 25px;
    background: rgba(255,128,0,0);
}

td {
    width: 80px;
    height:80px;    
    text-align:center;
    vertical-align:center;
}

.red { background-color: red; color: rgb(0,255,255); }
.lime { background-color: lime; color: rgb(255,0,255); }
.blue { background-color: blue; color: rgb(255,255,0); }
.yellow { background-color: yellow; color: rgb(0,0,255); }
.cyan { background-color: cyan; color: rgb(255,0,0); }
.magenta { background-color: magenta; color: rgb(0,255,0); }
.black { background-color: black; color: rgb(255,255,255); }
.gray { background-color: gray; color: rgb(128,128,128); }
.lightgray { background-color: lightgray; color: rgb(64,64,64); }

JavaScript

(function invertColor(){
for(i=0;e=document.all[i++];)['backgroundColor','color'].map(function(p){(d=getComputedStyle(e)[p])!='rgba(0, 0, 0, 0)'&&(e.style[p]=d.replace(/\d+/g,function(n){return 255-n}))})
})()