JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div id="counter">
  
</div>

CSS

#counter {
  font-size: 36px;
}

JavaScript

const $counter = document.getElementById('counter');

const value = 20;

const max = 40;

let hue;

if ( value >= max ) {
  hue = 0;
} else {
  hue = 255 - (255 * (value / max));
}

$counter.textContent = value;
$counter.style.color = `hsl(${hue}, 100%, 50%)`;