JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<html>
    <body>
       
        <div id="container">
            <button>Save Results</button>
        </div>
        <div id="message-box">Your Search Results have been saved.</div>
        
    </body>
</html>

CSS

body {
    background: #D3EBF6;
    padding: 0;
}

#container {
    background: #eee;
    width: 600px;
    height 1000px;
    margin: 0 auto;
}

button {
    margin-left: 270px;
}

#message-box {
    display: none;
    width: 100%;
    background: rgba(22,52,68,0.7);
    height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    font-family: helvetica neue, arial;
    position: absolute;
    bottom: 0;
    line-height: 50px;
}

JavaScript

$(document).ready(function () {
    
    $('button').click( function () {
        $('#message-box').slideUp('slow').delay(1500).slideDown('slow');
    });
    
});