JSFiddle - React, Tailwind, and code Playground

HTML

<p>Test</p>
<label for="intput1">Label:</label>
<input name="input1" type="text"/>
<input id="btnShake" type="button" value="Shake"/>

CSS

input
{
    border:1px solid black;
}

JavaScript

$(document).ready(function(){
    $('#btnShake').click(function(){
   Vibrate($('input[type=text]'));
                           });
});

var vibrateIndex = 0;
var selector;
//Animate the selector with the animation function
function Vibrate(item) {
    selector = $(item);
    var interval = 10;
    var duration = 500;
    vibrateIndex = setInterval(Vibe, interval);
    setTimeout(StopVibration, duration);
}

//Animation
function Vibe() {
    var shake = 3;
    $(selector).stop(true, false)
        .css({
            position: 'relative',
            left: Math.round(Math.random() * shake) + 'px',
            top: Math.round(Math.random() * shake)  +'px',
            borderColor: 'red'
        });
    
};

//Remove all CSS applied to the selector
function StopVibration() {
    clearInterval(vibrateIndex);
    $(selector).stop(true, false)
                .css({ position: 'static',
                        left: '0px', 
                        top: '0px',
                        borderColor: ''});
};