JSFiddle - React, Tailwind, and code Playground

HTML

<form>
First Name
  <input type="text" name="firstName" />
  <br/>
Last Name
  <input type="text" name="lastName" />
  <br/>
  <label style="display: none;">
    Accept Terms
    <input  type="checkbox" name="acceptTerms" />
  </label>
</form>

JavaScript

const formEl = document.querySelector("form");
const firstNameEl = formEl.querySelector("input[name='firstName']");
const lastNameEl = formEl.querySelector("input[name='lastName']");
const acceptTermsLabelEl = formEl.querySelector("label");

const validate = () => {
	if (!firstNameEl.value || !firstNameEl.value.length)
  	return false;
	if (!lastNameEl.value || !lastNameEl.value.length)
  	return false;
  
  return true;
}

const showBox = () => {
	acceptTermsLabelEl.style.display = "initial";
}

const hideBox = () => {
	acceptTermsLabelEl.style.display = "none";
}

let showBoxTimeout = null;

formEl.addEventListener("input", () => {
	const isValid = validate();
  
  if (isValid) {
  	if (!showBoxTimeout)
    	showBoxTimeout = setTimeout(() => {
      	validate() ? showBox() : hideBox()
        if (validate())
       		showBox();
        else
        	hideBox();
          
       	showBoxTimeout = null;
        
      }, 3000);
  } else {
  	hideBox();
  }
})