JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" pattern="^[a-zA-Zà-úÀ-Ú ]{2,30}$" autocomplete="off" title="Somente letras e acentos são permitidos. Até 30 caracteres." name="nome" maxlength="30" required autofocus/>

CSS

input:invalid {
    background: red;
    color: white;
}