JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" id="LinkToShow">Клак</a>
<div id="hiddenElem">Stupido</div>
CSS
html, body{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#hiddenElem{
position: absolute;
width: 100px;
height: 20px;
border-radius: 50px;
bottom: -100px;
text-align: center;
font-size: 20px;
line-height: 20px;
padding: 40px 0;
right: 0px;
z-index; 100px;
color: #fff;
background: #bc001c;
}
JavaScript
$('#LinkToShow').click(function(){
$('#hiddenElem').animate({
bottom: "20px",
right: "30px"
}, 300)
window.setTimeout(hideElem, 2000);
})
function hideElem(){
$('#hiddenElem').animate({
bottom: "-100px",
right: "0px"
}, 300)
}