JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label for="nome">Nome</label>
    <input type="text" id="nome">
    <br>
    <label for="cpf">CPF</label>
    <input type="text" id="cpf">
    <br>
    <label for="rg">RG</label>
    <input type="text" id="rg">
    <br>
    <input style="color: #0026ff" type="button" id="validar" value="Validar !" />
    <br />
    <span id="validacao">Campos Inválidos<br /></span>
</form>

CSS

div {
                width: 40px;
                height: 40px;
                margin: 5px;
                float: left;
                border: 2px blue solid;
                text-align: center;
            }
            
            span {
                color: red;
            }

JavaScript

$(document).ready(function() {
    var $validacao = $("#validacao");
    $("#validar").click(function() {
        $validacao.html('');
        $("input").each(function(index, element) {
            if (!element.value.trim()) {
                $validacao.append(element.id + "<br>");
            }
        });
    });
});