JSFiddle - React, Tailwind, and code Playground

by jarhar

HTML

<form id=form1 action="http://example.com">
  <div>form :user-valid / :user-invalid</div>
  <input type=email id=email1>
  <input required id=required1>
  <input type=submit id=submit1>
</form>

<form id=form2 action="http://example.com">
  <div>form :valid / :invalid</div>
  <input type=email id=email2>
  <input required id=required2>
  <input type=submit id=submit2>
</form>

CSS

form {
  margin: 10px;
  padding: 10px;
}

#form1:user-valid { background-color: rgb(200, 255, 200); }
#form2:valid { background-color: rgb(200, 255, 200); }

#form1:user-invalid { background-color: rgb(255, 200, 200); }
#form2:invalid { background-color: rgb(255, 200, 200); }

#form1 input:user-valid { border: 3px solid green; }
#form2 input:valid { border: 3px solid green; }

#form1 input:user-invalid { border: 3px solid red; }
#form2 input:invalid { border: 3px solid red; }