JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<div id="alert_top">
    <div class="alertcontainer">
        <div class="alertclose alertstyle"><a class="alert_topClose">Close</a></div>
        <div class="alertcontent alertstyle">Need to grab your audience immediately? It would be awesome to see a message alert across the top for something like that!</div>
    </div>
</div>

CSS

#alert_top {
    position:absolote;
    width:100%;
    z-index:5;
    border: 0px;
    background-color: #CCC;
    padding-top: 12px;
    padding-bottom: 12px;
}
.alertcontainer {
    margin: auto;
}
.alertcontent {
    margin-right:100px;
}
.alertclose {
    float: right;
    width:80px;
}
.alerttext {
}
#alert_cancel_button {
    left: 50%;
    top: 2px;
    width: 50px;
}
.alertstyle {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    font-weight: normal;
}

JavaScript

/* The fade in script */
$(document).ready(function(){
    $('#alert_top').delay(2000).fadeIn(300);
});
/* The fade out script */
$(function(){ 
    $(".alert_topClose").click(function(){
        $("#alert_top").slideUp(300, function(){
            $(this).remove();
        });
    });
});