JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Password Shake</h1>
<p>Type anything other than <code>password</code> in the input field below and hit [enter], and watch it change to a red outline and shake back and forth</p>
    
<div class="box">
    <input type="password" id="demo-password" placeholder="password" autofocus />
</div>

CSS

div.box {
    margin: 20px;
    padding: 15px;
    background-color: lightgrey;
}
#demo-password {
    margin: 5px;
    position: relative;
}
#demo-password.invalid {
    outline-color: red;
    /* also need animation and -moz-animation */
    -webkit-animation: shake .5s linear;
}
/* also need keyframes and -moz-keyframes */
 @-webkit-keyframes shake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}

JavaScript

$('#demo-password').on('keyup', function (e) {
    var $input = $(this);
    var val = $.trim($input.val());

    $input.removeClass("invalid");

    if (e.which !== 13 || !val) {
        return;
    }

    if (val != "password") {
        $input.select();
        
        $input.addClass("invalid");
    }
});