JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" id="test" required />
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}
   
input:valid {
  background-color: #ddffdd;
}
   
input:required {
  border-color: #800000;
  border-width: 3px;
}

JavaScript

elementList = document.querySelectorAll(':invalid');

console.log(elementList[0].id)