JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<input type="text" required pattern="^[a-zA-Z0-9 \~\!\@\#\$\%\^\(\)_\'\-\+\=\{\}\[\]\|\:\;\,\.\?\/]{0,45}$" title="incorrect format"/>
<input type="submit"/>
</form>
<form>
<input type="text" required pattern="^[a-zA-Z0-9 \~\!\@\#\$\%\^\(\)_\'\-\+\=\{\}\[\]\|\:\;\,\.\?\/]{0,45}$" title="incorrect format"/>
<input type="submit"/>
</form>