JSFiddle - React, Tailwind, and code Playground

by robasc33

HTML

<div id="message"></div>

JavaScript

(function($) {

    $.widget('tools.message', {
        txtStyle: 'margin: 10px auto; text-align: center; width: 232px; word-wrap: break-word;',
        img: 'position: fixed; margin-top: -200px; text-align: center;background-color: green;' +
                'box-shadow: 2px 2px 4px #888;}',
        options: {
            class: 'message',
            msg: 'Success!',
            slideIn: 1000,
            slideOut: 4000
        },
        _create: function() {

            var message = '<div id="text">' + this.options.msg + '</div>';
            this.element.attr('style', this.img).append(message);
            var el = this.element;
            this.element.click(function() {
                this.messagebox(el);
            });

        },
        _init: function() {
            this.messagebox(this.element);
        },
        /** display successful messagebox **/
        messagebox: function(el) {

            $('#text').attr('style', this.txtStyle);

            $(el).animate({top: '+=200'}, this.options.slideIn)
                    .delay(1000)
                    .animate({top: '-=200'}, this.options.slideOut);
        },
        destroy: function() {
            this._destroy();
        }
    });
}(jQuery));

  $('#message').message();