JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="text" name="extension" required pattern=".{4}|.{11}" title="Please Enter the Extension Number">
<button>Submit</button>
</form>
<form>
<input type="text" name="extension" required pattern=".{4}|.{11}" title="Please Enter the Extension Number">
<button>Submit</button>
</form>