JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" pattern=".{0,10}">
    <div class="errorMsg">Max 10 Characters</div>

CSS

.errorMsg {display: none;}
:invalid + .errorMsg {display: block;}