JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Formnovalidate Example</title>
</head>
<body>
   <h1>Formnovalidate Example</h1>
  <p>Adding the <code>formnovalidate</code> parameter to the Cancel button allows the form to be submitted via that button without the browser's built-in validation of the <code>required</code> parameter on the input box. YMMV on older browsers.</p>

  <form method="post">
    <label>Email:
      <input type="email" name="email" required />
    </label>
    <input type="submit" name="submit" value="Submit" />
    <input type="submit" name="submit" value="Cancel" formnovalidate />
  </form>
 
</body>
</html>

CSS

input[type="email"] { border: 1px solid #ccc; padding: 5px; border-radius: 3px; }
:invalid { border-color: #c33 !important; }