JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="containerbox">
        <div id="centerbox1" style= min-width:25%; max-height: 90px">
          <div class="value">
          <p><span style="color: #fff ;font-weight:bold; font-size:36px">53%</span>
          <br>
          <span style="color: #fff ; font-weight:bold">Utilisation</span></p>
          </div>
        </div>
   </div>

JavaScript

(function () { 

        var udata = [23];

        if (udata >= 70) {
        document.getElementById("centerbox1").style.backgroundColor = '#99C262';
        }
        else  
        if (udata >= 51 && udata <70)  
        {
        document.getElementById("centerbox1").style.backgroundColor = '#F8D347';
        }  
        else  
        if (udata <=50)  
        {
        document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
        }
     })();