JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result">
</div>
 <table>
   <tr>
     <td><b>some heading</b></td>
     <td><b>Value</b></td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">0</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">0.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">1</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">1.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">2</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">2.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">3</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">3.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">4</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">4.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">5.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">6</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">6.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">7</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">7.5</td>
   </tr>
   <tr>
     <td>some other value</td>
     <td class="valueTD">8</td>
   </tr>
 </table>

CSS

td {
  border: 1px solid #ccc;
  margin: 0;
  padding: 5px;
}

JavaScript

function GreenYellowRed(value) {
  value--;
  
  var r,g,b;

  if (value < 4) {
    // green to yellow
    r = Math.floor(255 * (value / 4));
    g = 255;

  } else {
    // yellow to red
    r = 255;
    g = Math.floor(255 * ((4-value%4) / 4));
  }
 b = 0;

  return r + "," + g + "," + b;
}

var output = "";
for (var i = 1; i <= 8; i++) {
  var rgb = GreenYellowRed(i);
  output += "<div style='display:inline-block;width:50px;height:50px;background-color: rgb(" + rgb + ")'>" + i + "</div>";
}

document.getElementById("result").innerHTML = output;

var colorTDs = $('.valueTD');
$.each(colorTDs, function (index, colorTD) {
  //colorTD will be JavaScript Element, I think.. so wrapping it as jQuery
  var value = $(colorTD).html();
  if (!isNaN(value)) {
  	var color = GreenYellowRed(value);
    $(colorTD).css('background-color', "rgb(" + color+ ")");
  }
});