JSFiddle - React, Tailwind, and code Playground

HTML

<span class="funny-elem" data-mystate="127">Hello World</span>
<span class="funny-elem" data-mystate="69">Hello Bird</span>
<span class="funny-elem" data-mystate="1337">Hello Nerd</span>
<span class="funny-elem" data-mystate="14">Hello What</span>
<span class="funny-elem" data-mystate="0">Hello Else</span>

CSS

span{display:block;}
.funny-elem.over50{ color:#0f0;}
 .funny-elem.under50{ color:#f00;}

JavaScript

var x = document.getElementsByClassName("funny-elem")
var i;
for (i = 0; i < x.length; i++) {
    var comparator = x[i].getAttribute("data-mystate");
    if (comparator > 50){
        x[i].setAttribute("class","funny-elem over50");
    }
    if (comparator < 50){
         x[i].setAttribute("class","funny-elem under50");
    }
}

//console.log(x);