JSFiddle - React, Tailwind, and code Playground

HTML

<div>
      Input 1: <input type = "text" class = "misInputs" autofocus /> <label class = "misLabels"></label>
</div>
  
<div>
      Input 2: <input type = "text" class = "misInputs" /> <label class = "misLabels"></label>
</div>
  
<div>
      Input 3: <input type = "text" class = "misInputs" /> <label class = "misLabels"></label>
</div>
  
<button id = "comprobar">Comprobar</button>

CSS

.misLabels{
    color: white;
}

JavaScript

var inputs = document.getElementsByClassName("misInputs"),
    labels = document.getElementsByClassName("misLabels"),
    comprobar = document.getElementById("comprobar");

comprobar.addEventListener("click", function(){
    for (var i in inputs){
        if (!inputs[i].value.length){
            labels[i].style.background = "red";
            labels[i].innerText = "Incompleto";
        }
        else{
            labels[i].style.background = "green";
            labels[i].innerText = "Completo";
        }
    }
}, false);