JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    
<div id="overlay-header"></div>

<div id="block">Hello!</div>
<button id="go">&raquo; Run</button>

</body>
</html>

CSS

div {
    position:absolute;
background-color:#bca;
width:100px;
border:1px solid green;
}

.go {
    position:relative;
}

#overlay-header{border-bottom:1px solid black;opacity:0;display:none;background:rgba(255, 255, 255, 0.949219);font-size:20px;font-weight:bold;left:0px;padding-top:5px;padding-bottom:10px;padding-right:10%;padding-left:10%;position:fixed;top:0px;width:80%;z-index:250;-moz-box-shadow:0px 1px 15px #9c9c9c;-webkit-box-shadow:0px 1px 15px #9c9c9c;box-shadow:0px 1px 15px #9c9c9c;}

JavaScript

/* Using multiple unit types within one animation. */

$("#go").click(function(){

showoverlay()
});

function showoverlay(h){
        h=h||{};
    var j=$("#overlay-header"),
        i=h.message||"",
        g=$.browser.msie?{background:"#fff",opacity:0}:{};
        if(h.showClose!==false){
        i+='<br><a class="close-overlay">close this message</a>'
        }
        j.html(i).css(g).animate({opacity:"1",height:"show"},"slow",h.complete).find(".close-overlay").click(function(){j.animate({opacity:"0",height:"hide"},"fast")})}