JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bar">
    <div class="inner"></div>
</div>

CSS

.bar{
    background:#ccc;
    height:40px
}
.inner{
    background:#000;
     height:40px;
    width:0;
}

JavaScript

{
    var amount = 1163; //example amount
    var x = 0;

    if (0 <amount && amount< 500) {
        x = 0;
    } if (500 < amount && amount< 1000) {
        x = 1;
    } if (1000 < amount && amount < 1500) {
        x = 2;
    } if (1500 < amount && amount < 2000) {
        x = 3;
    } if (2000 < amount && amount < 2500) {
        x = 4;
    } if (2500 < amount && amount < 3000) {
        x = 5;
    }
        document.querySelector(".inner").style.width=Math.floor(100/x)+"px"
}