JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div id="notification-container">
   
</div>
<div id="message-box">Achivement Unlocked: <b> Rising Sun.</b></div>

CSS

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

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


#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;
    
    bottom: 510px;
    line-height: 50px;
}

JavaScript

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