JSFiddle - React, Tailwind, and code Playground

by eVerify

HTML

<div class="container">
    <div class="row">
         <h3>About This Sample</h3>

        <p>Email syntax validation demo using native HTML5. See full article at <a href="https://www.verifyemailaddress.io/Validate_Email/jQuery-Email-Validation-1" rel="nofollow">verifyemailaddress.io</a>.</p>
        
<h3>Example HTML5 Syntax Email Validation Fail in Chrome and IE</h3>

        <p>Test Scenarios:</p>
        <ul>
            <li><em>Pelé@example.com</em> - should pass validation</li>
            <li><em>example.com</em> - should fail validation</li>
            <li><em>Pelé@example.com.br</em> - should pass validation</li>
            <li><em>Pelé@bücher.com</em> - should pass validation</li>
        </ul>
        <form action="" method="POST" role="form" onsubmit="javascript: alert('validation passed and form submitted'); return false;">
            <div class="form-group">
                <label class="control-label" for="html5emailfail">Email:</label>
                <div class="input-group"> <span class="input-group-addon">@</span>

                    <input type="email" id="html5emailfail" class="form-control" required="" placeholder="Enter email address" />
                </div>
            </div>
            <button type="submit" class="btn btn-primary">submit</button>
        </form>
    </div>
</div>