JSFiddle - React, Tailwind, and code Playground

HTML

<form><div id="message"></div>
    <input> Label 1<br/><br/>
    <input> Label 2<br/><br>
    <textarea>Larger text area</textarea><br/><br/>
    <textarea>And another</textarea><br/><br/>
    <button type="button">Submit</button>
</form>

CSS

form { position:relative; width:500px; }
#message { 
    position:absolute;
    display:none;
    height:100px;
    width:200px;
    border: 1px gray solid;
    background-color:lime;
    font-size: 1.4em;
    line-height:100px;
    text-align:center;
    border-radius: 5px;
    bottom: 100px;
}

JavaScript

(function($) {
    $.fn.extend({
        center: function() {
            return this.each(function() {
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({
                    position: 'absolute',
                    margin: 0,
                    left: (left > 0 ? left : 0) + 'px'
                });
            });
        }
    });
})(jQuery);

$("#message").center();

$("button").click(function() {
    var msg = $("#message");
    msg.text("Item saved!")
    msg.hide()
    msg.stop(true, true).fadeIn('slow').animate({
        "bottom": "4px",
        "height": "17px",
        "font-size": "1em",
        "left": "80px",
        "line-height": "17px",
        "width": "100px"
    }).delay(2000).fadeOut('slow').css({
        "height": "100px",
        "width": "200px",
        "font-size": "1.4em",
        "line-height": "100px",
        "bottom": "100px"
    }).center();
});