JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text "class="try" value="value">
<br><br>
<input type="button" class="fire" value="Fire Animation">

CSS

body {
    padding: 30px;
}

.try {
    border: 1px solid #a6caf0;
}

.shaking {
    border-color: red;
}

JavaScript

$.fn.shake = function ( times, distance, duration, callback ) {
    return this.css({ position: 'relative' }).each( function () {            
        for ( var i = 0, t = duration / times; i < times; i+= 1 ) {
            $( this ).
                animate({ left: -distance }, t / 3 ).
                animate({ left:  distance }, t / 3 ).
                animate({ left:         0 }, t / 4 );
        }
        
        $( this ).show( callback );
    });
};

var field = $( '.try' )[0],
    button = $( '.fire' )[0];

$( button ).click( function () {
    $( field ).addClass( 'shaking' ).shake( 5, 10, 500, function () {
        $( this ).removeClass( 'shaking' );
    });
});