JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<form>
    <label>Name</label>
    <input id="email" class="required" type="text"/>
    <label>Name</label>
    <input id="name" class="required" type="text"/>
    <label>Surname</label>
    <input id="surname" type="text"/>
    <label>Password</label>
    <input id="password" class="required" type="password"/>
    <input type="button" id="go" value="go"/>    
</form>

CSS

input[type="text"], input[type="password"]{
    display:block; 
    border: 1px solid #dadada;
    border-radius: 2px;
}

@-webkit-keyframes emptyInput {
	0%{
	   -webkit-transform:rotate(0deg);   
    }    
    25%{ 
        -webkit-transform:rotate(5deg);     
    }
    50%{
        -webkit-transform:rotate(-10deg);     
    }
    75%{
         -webkit-transform:rotate(0deg);        
    }
    
}

@keyframes emptyInput {
	0%{
	   -webkit-transform:rotate(0deg);   
    }    
    25%{ 
        -webkit-transform:rotate(5deg);     
    }
    50%{
        -webkit-transform:rotate(-10deg);     
    }
    75%{
         -webkit-transform:rotate(0deg);        
    }    
}

.empty{
    outline: none;
    border-color: #FF0000;
    box-shadow: 0 0 10px #FF0000;
    -webkit-animation-name: emptyInput;
	-webkit-animation-duration: 0.5s;
}

JavaScript

$("#go").click(function(e){
    $(".required").each(function(){
        if($(this).val() == ''){
            $(this).addClass('empty');   
        }
    });
    e.preventDefault();
});