JSFiddle - React, Tailwind, and code Playground
HTML
<div class="banner">
<div class="text"><a href="" target="_blank" >This is for testing</a></div>
<div class="btn">open</div>
</div>
CSS
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
cursor:pointer;
text-align:center;
width:2em;
position:fixed;
}
JavaScript
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});