JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <input value="i'd like to retain my focus" />
</div>

<button id="pulsate">focus and pulsate</button>
<button id="slide">focus and slide</button>

JavaScript

$.effects._stopEvent = function(event) {
    event.stopImmediatePropagation();
};

$.effects.createWrapper = function(element) {

        // if the element is already wrapped, return it
        if (element.parent().is('.ui-effects-wrapper')) {
            return element.parent();
        }

        // wrap the element
        var props = {
                width: element.outerWidth(true),
                height: element.outerHeight(true),
                'float': element.css('float')
            },
            wrapper = $('<div></div>')
                .addClass('ui-effects-wrapper')
                .css({
                    fontSize: '100%',
                    background: 'transparent',
                    border: 'none',
                    margin: 0,
                    padding: 0
                });
        var focused = $(document.activeElement);
        element.wrap(wrapper);
        wrapper = element.parent(); //Hotfix for jQuery 1.4 since some change in wrap() seems to actually loose the reference to the wrapped element

        // transfer positioning properties to the wrapper
        if (element.css('position') == 'static') {
            wrapper.css({ position: 'relative' });
            element.css({ position: 'relative' });
        } else {
            $.extend(props, {
                position: element.css('position'),
                zIndex: element.css('z-index')
            });
            $.each(['top', 'left', 'bottom', 'right'], function(i, pos) {
                props[pos] = element.css(pos);
                if (isNaN(parseInt(props[pos], 10))) {
                    props[pos] = 'auto';
                }
            });
            element.css({position: 'relative', top: 0, left: 0, right: 'auto', bottom: 'auto' });
        }
        wrapper.css(props).show();
        focused.bind('focus', $.effects._stopEvent);
        focused.focus();
        focused.unbind('focus', $.effects._stopEvent);
        return wrapper;
};

$.effects.removeWrapper...