JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<script src="https://rawgithub.com/DLarsen/jquery-hottie/master/jquery.hottie.js"></script>
    <table id="myTable">
        <tr><td>-100</td><td>50</td><td>-30</td></tr>
        <tr><td>100</td><td>0</td><td>-30</td></tr>
        <tr><td>75</td><td>-50</td><td>40</td></tr>
    </table>

CSS

ul { margin-bottom: 10px; }
table { margin: 10px; }
td { padding: 4px; }

JavaScript

$("#myTable td").hottie({
        colorArray : [ 
            "#F8696B", // highest value
            "#FFFFFF",
            "#63BE7B"  // lowest value
            // add as many colors as you like...
        ]
    });