JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testbox"><div id="close">X</div>Gained new privilegs -- ability to set unlimited reputation!</div>

<div id="button">CLICK ME</div>

CSS

html, body {margin: 0px; padding: 0px;}


#testbox {position: fixed; width: 100%; top: 0px; background: #FF7B10; padding: 5px; text-align: center; font-weight: bold; display: none; cursor: pointer;}
#testbox #close {float: right; padding: 1px 3px; font-weight: bold; background: #FFCC00; border: 1px solid #000000; font-size: 12px; margin-right: 10px;}

#button {margin-top: 100px; padding: 5px; background: #777777; font-weight: bold; display: inline-block; color: #FFFFFF; cursor: pointer;}

JavaScript

$(document).ready(function () {
    $('#testbox').delay(500).fadeIn('slow');
    $('#testbox').click(function () {
        $(this).fadeOut('slow');
    });
    $('#button').click(function () {
        if ($('#testbox').is(':visible')) {
            $('#testbox').fadeOut('slow');
        } else {
            $('#testbox').fadeIn('slow');
        }
    });
});