JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="input test" value=""/>
<input type="text" class="input test" value=""/>
<input type="text" class="input test" value=""/>
<input type="text" class="input test" value=""/>
<input type="text" class="input test" value=""/>
<input type="text" class="input test" value=""/>

CSS

.input{
  border:1px solid blue;
}

.filled{
  border:1px solid red;
}

JavaScript

var input = document.getElementsByClassName('input');

contentCheck = function(i){
		if(input[i].value>0) input[i].classList.add('filled');
    else input[i].classList.remove('filled');
};

for(var i=0; i<input.length; i++) {
		input[i].addEventListener('blur',function(e){
    	console.log(e.target.value);
    });
}