JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.min.js"></script>
</head>
<body>
    <div id="alertmsg">
    </div>
        <div id="wrapper">
            <div id="menu">
               Menu area
            </div>
            <div id="mainContent">
               <p>
                   Main content
               </p>
            </div>
        </div>
    </body>
</html>

CSS

.alertmsg, .alert-msg-failed {
        font-family:Arial,Helvetica,sans-serif;
        font-size:135%;
        font-weight:bold;
        overflow: hidden;
        width: 100%;
        text-align: center;
        position: absolute;
        background-color: #333F31;
        height: 20;
        color: #F3FDED;
        font: 20px/40px arial, sans-serif;
        display:none;
    
    
}

.alert-msg-failed {
        background-color: red;
        color: #fff;
}

body {
            font-family:Arial,Helvetica,sans-serif;
            font-size: 1em;
        }

#wrapper {
            width: 75%;
            margin: auto;    
        }

#menu {
        width: 100%;
        height: 30px;
        background-color: #b8b8b8;
        display: block;
}

#mainContent 
        {
            background-color: #f2f2f2;
            width: 100%;
            height: 300px;
        }

p
{
    padding: 8px
}

JavaScript

$(document).ready(function() {

    var $alertdiv = $('#alertmsg');

    $alertdiv.removeClass('alertmsg').addClass('alert-msg-failed');
    $alertdiv.text('custom message set in jquery code');

    $alertdiv.bind('click', function() {
        $(this).slideUp(200);
    });

    $("#alertmsg").slideDown("slow");
    setTimeout(function() {
        $alertdiv.slideUp(200)
    }, 3000);

});