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(){
       $('input[type=text]').vibrate();
                        });
});

(function($){ 
    $.fn.vibrate = function(options) {
        options = $.extend({}, $.fn.vibrate.defaultOptions, options);     
        var control = $(this);
        var vibrateIndex = 0;
        var selector;
        
        vibrateIndex = setInterval(vibe, options.interval);
        setTimeout(stopVibration, options.duration);
        function vibe() {
            var shake = 3;
            $(control).stop(true, false)
                .css({
                    position: 'relative',
                    left: Math.round(Math.random() * shake) + 'px',
                    top: Math.round(Math.random() * shake)  +'px',
                    borderColor: 'red'
                });
            
        };

        function stopVibration() {
            clearInterval(vibrateIndex);
            $(control).stop(true, false)
                        .css({ position: 'static',
                                left: '0px', 
                                top: '0px',
                                borderColor: ''});
        };
        return this;
   } 
    
    $.fn.vibrate.defaultOptions = {
         interval : 10
       , duration : 500
    }
})(jQuery);