JSFiddle - React, Tailwind, and code Playground

by lovromar

HTML

<p><a href="#" id="save">Save</a></p>


<div id="info-header">
    Thanks! Your information have been saved
</div>

CSS

#save {
    font: 80% Arial, sans-serif;
    display: inline-block;
    color: #222;
    background: #eee;
    padding: 4px 12px;
    text-decoration: none;
    border: 1px solid;
    border-color: #999 #999 #ccc #ccc;
    margin: 1em;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#save:active {
    border-color: #ccc #ccc #999 #999;
}

#info-header {
    width: 100%;
    height: 3em;
    font: 1.7em Arial, sans-serif;
    line-height: 3;
    text-align: center;
    background: rgba(190, 225, 153, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    color: #333;
    text-transform: capitalize;
    display: none;
}

JavaScript

$('#save').click(function(e) {

    // AJAX call here
    $('#info-header').slideDown(800, function() {

        $(this).delay(2000).slideUp(800);

    });

    e.preventDefault();
});