Could someone give me an explanation of how to make these types of custom alerts into inputs?

Could someone give me an explanation of how to make these types of custom alerts into inputs?

Print

Code of the input error:

<div class="andes-form-control__bottom"><svg class="andes-form-control__error-icon" width="12" height="12" viewBox="0 0 12 12"><defs><rect id="a" width="12" height="12" rx="6"></rect></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"></use></mask><g mask="url(#b)"><path fill="#F23D4F" d="M-.686-.343h13.371v12.686H-.685z"></path><path fill="#FFF" fill-rule="nonzero" d="M6 7.636a.727.727 0 1 1 0 1.455.727.727 0 0 1 0-1.455zm.727-4.727l-.182 4h-1.09l-.182-4h1.454z"></path></g></g></svg><span id="user_id-message" class="andes-form-control__message"><div class="input-error"><div class="ui-form__message">Revise o seu e-mail ou usuário.</div></div></span></div>