JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group">
  <label>Email</label>
  <input type="email" placeholder="Email">
</div>

<div class="form-group">
  <label>Name</label>
  <input type="text" placeholder="Name">
</div>

CSS

.form-group {
    opacity: 0.3;
}
.form-group.infocus {
  opacity: 1;
}

JavaScript

/**
 * Sets or removes a focus class.
 */
function updateFocus(e) {
	// Log the event to view details about it
  // console.log(e);
  
  // The "has focus" class name
  var focusClass = "infocus";
  // The wrapper element selector
  var wrapperSel = ".form-group";
  
  
  //*===========================================================
  // Option 1: has(":focus")
  // - needs only the wrapper selector
  // ===========================================================
  var wrapper = $(wrapperSel);
  // Remove the class on all
  //wrapper.each(function() { $(this).removeClass(focusClass);});
  wrapper.removeClass(focusClass);
  // Add class only to the one whose descendant has focus
  wrapper.has(":focus").addClass(focusClass);
  //*/
  
  /* ===========================================================
  // Option 2: closest()
  // - needs the event and the wrapper selector
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).closest(wrapperSel).addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).closest(wrapperSel).removeClass(focusClass);
  }
  //*/
  
  /* ===========================================================
  // Option 3: parents()
  // - needs the event and the wrapper selector
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).parents(wrapperSel).addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).parents(wrapperSel).removeClass(focusClass);
  }
  //*/
  
  /* ===========================================================
  // Option 4: parent()
  // - needs only the event (the wrapper selector is optional)
  // ===========================================================
  if (e.type === "focus") {
  	$(e.target).parent().addClass(focusClass);
  } else if (e.type === "blur") {
    $(e.target).parent().removeClass(focusClass);
  }
  //*/
}

// Bind the updateFocus() function above to focus/blur of form...