JSFiddle - React, Tailwind, and code Playground

HTML

<button id="testBtn">Refresh</button>
<div id="output"></div>

CSS

span {
  padding: 2px;
  margin: 5px;
  display: inline-block;
}
.redColor {
  color: red
}
.orangeBg {
  background: orange
}
.blueOutline {
  outline: solid 1px lightblue
}

JavaScript

function myFuzzyComparator(baseValue, range) {
  let min = baseValue - range,
      max = baseValue + range

  return function(x){
    return x > min && x < max
  }
}

// test:
let cmp1 = new myFuzzyComparator(175, 5)
let cmp2 = new myFuzzyComparator(100, 20)
let cmp3 = new myFuzzyComparator(140, 50)

function foo(){
  output.innerHTML = ''

  new Array(100).fill(0).map(v => {
    let randomNumber = Math.round(Math.random() * 200)
    let elem = document.createElement('span')
    elem.textContent = randomNumber
    if (cmp1(randomNumber)) {
      elem.classList.add('redColor')
    }
    if (cmp2(randomNumber)) {
      elem.classList.add('orangeBg')
    }
    if (cmp3(randomNumber)) {
      elem.classList.add('blueOutline')
    }
    output.appendChild(elem)
  })

}
testBtn.onclick = foo
foo()