JSFiddle - React, Tailwind, and code Playground

HTML

<button>click me</button>
<div class="required">
    <p>
         <label for="id_username">Nombre de usuario:</label> 
         <input type="text" name="username" maxlength="30" id="id_username"/>
    </p>
     <ul class="errorlist ui-state-error">
         <li>Este campo es obligatorio.</li>
     </ul>
</div>

CSS

.errorlist {
        display: inline-block;
        position: relative;
        margin-left: 1em;
        top: -1.5em;
        max-width: 30em;
        min-width: 10em;
        border-radius: 4px;
    }
/* Arrow: */
.errorlist:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 10px;
    bottom: 100%;
    border-color: transparent transparent rgb(205, 10, 10) transparent;
    border-style: solid;
    border-width: 10px;
}
.errorlist li {
    margin: 0;
    padding: 0.5em;
}

JavaScript

$('button').on( 'click', function() {
    $('.errorlist').append('<li>Este campo es obligatorio.</li>');
});