JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
<span class="foo">7</span> 
<span class="foo">2</span> 
<span class="foo">9</span>
<span class="foo">4</span>
</div>

CSS

.highest{
color:red
}
.lowest{
color:green
}
.medium{
color:orange
}

JavaScript

$(".foo").each(function()
               {
              var layer=$(this);
                 var val=parseInt(layer.text());


                if(val>7)layer.addClass("highest")
                    else
                if(val>4 && val<=7)layer.addClass("medium");
                   else {
                       layer.addClass("lowest");
                   }                        
               });