JSFiddle - React, Tailwind, and code Playground
by mgrcic
HTML
<div id="overlay-header" style="opacity: 1; display: block; ">Welcome back <a href="/users/aaaa">aaaa</a>, you've been logged in. <a href="javascript:location.reload(true)">Click here</a> to refresh the page.<br><a class="close-overlay">close this message</a></div>CSS
#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;
}
.close-overlay{color:#999;cursor:pointer;font-size:10px;font-weight:normal;}