JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.errorlist {
    display: block;
    position: relative;
    margin-left: 1em;
    margin-top: 0em;
    max-width: 30em;
    min-width: 10em;
    border-radius: 4px;
    list-style:none;
}
/* 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;
}