JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <input placeholder="Adicionar morador no 1° Andar" type="text" id="name1" style="margin-bottom: 40px;"> 

        <input type="button" value="Adicionar" onclick="adicionarMorador1(); confirmacao1();"> 
        
        <p style="margin-top: -2%;" id="confirma1"></p>
    
</div>

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#invisivel {
    -moz-animation: cssAnimation 0s ease-in 5s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 5s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 5s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 5s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

JavaScript

var andar1 = Array("Matheus")
     
        function adicionarMorador1() {
            var nome = document.getElementById("name1").value

            if (nome === "") {
                console.log("Insira um valor válido")
            } else {
                andar1.push(nome)
               // alert("Morador foi adicionado no 1° Andar")
                console.log(andar1)
            }
        }

        function confirmacao1 () {
            var x = "<p id='invisivel'>O morador foi adicionado no 1° andar</p>";
            document.getElementById("confirma1").innerHTML = x;
        }

        function ordenar1() {
            andar1.sort()
            console.log(andar1)
        }