JSFiddle - React, Tailwind, and code Playground
HTML
<div id="notify-container">
<div id="notify--1" style="">
<span class="notify-close"><a title="dismiss this notification" onclick="$('#notify-container').slideUp();">×</a></span>
<span class="notify-text">
Welcome to Q&A for professional and enthusiast programmers — check out the <a href="/faq">FAQ</a>!
</span>
</div>
</div>
CSS
#notify-container {
color: #735005;
font-size: 130%;
font-weight: bold;
text-align: center;
}
#notify-container div {
background-color: #F4A83D;
border-bottom: 1px solid #D6800C;
padding: 7px 0;
}
#notify-container span.notify-close {
background-color: #FAD163;
border: 2px solid #735005;
cursor: pointer;
display: block;
float: right;
margin-right: 20px;
padding-left: 4px;
padding-right: 4px;
text-decoration: none;
}
#notify-container a {
color: #735005;
text-decoration: underline;
}
#notify-container span.notify-close a {
text-decoration: none;
}