JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<form>
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
</form>

</body>

CSS

.x{
		background: lightblue;
	}
	.y{
		background: red;

	}

JavaScript

var dados = document.getElementsByClassName('x');


dados.forEach(dado => {
	dado.addEventListener('blur',function(e){
		var classe = e.this.value == 1 ? 'x' : 'y';
		
		e.this.className = classe; 

	});
});