JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<h2 id="module-1">Module 1</h2>
<table>
	<thead>
		<tr>
			<th scope="col">Module</th>
			<th scope="col">Name</th>
			<th scope="col">N1</th>
			<th scope="col">N2</th>
			<th scope="col">N3</th>
			<th scope="col">N4</th>
			<th scope="col">N5</th>
			<th scope="col">C1</th>
			<th scope="col">C2</th>
			<th scope="col">C3</th>
			<th scope="col">C4</th>
			<th scope="col">Comment/Reference</th>
			<th scope="col">Recommended file/folder name</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td scope="row"></td>
			<td>Table of Contents</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>The main Table of Contents should be located in the top level folder</td>
			<td></td>
		</tr>
		<tr>
			<td scope="row">1.0.1</td>
			<td>Cover letter (letter of application)</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td>R</td>
			<td></td>
			<td>101-cover</td>
		</tr>
		<tr>
			<td scope="row">1.0.3</td>
			<td>Response to request for information (including screening questions)</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td></td>
			<td>103-response</td>
		</tr>
		<tr>
			<td scope="row">1.2.3</td>
			<td>Patent certification</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>D</td>
			<td>Not applicable for applications submitted under section 9D of the Act</td>
			<td>123-pat-cert</td>
		</tr>
		<tr>
			<td scope="row">1.3.1</td>
			<td>Product Information and package insert</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td rowspan="4">D</td>
			<td...

CSS

table {
    border:solid 1px red;
    border-collapse:collapse;
}
th {
    background-color:teal;
    color:white;
}
td {
    border:solid 1px black;
}

.bg-redlt {
    background-color:red;
}
.bg-green {
    background-color:green;
}
.bg-greylt {
    background-color:grey;
}
.bg-blue30 {
    background-color:blue
}

JavaScript

$('table td').each(function() {
    var $this = $(this),
        $text = $this.text();
    
    console.log($text);
    
    if ($text === 'D') {
       $this.addClass('bg-green');
    }
	else if ($text === 'NA') {
       $this.addClass('bg-greylt');
    }
    else if ($text === 'R') {
       $this.addClass('bg-redlt');
    }
    else if ($text === 'O') {
       $this.addClass('bg-blue30');
    }
});