JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input  name="PROPERTY[24][0]" size="25" pattern="\S+@[a-z]+\.[a-z]+" value="" required="" type="text" />
  <input type="Submit" />
 </form>

CSS

input:valid {
  color: navy;
}
input:invalid {
  color: red;
}