JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Page 1</h1>

<h3>Page 1</h3>
<a href="page-2.html"><h3>Page 2</h3></a>
<a href="page-3.html"><h3>Page 3</h3></a>

<div>
	<div id="popupBox" style="display: none;"> 
	<div class="popupText">HELLO I AM POPUP!</div>
	<div class="close">✕</div>
	</div>
	
</div>

CSS

#popupBox {
	position: fixed;
	bottom: 10px;
	right: 10px;
	width: 322px; 
	height: 184px;
	border: 1px solid #e0e0e0;
	background-color: rgb(255,255,255);
	z-index: 10;
	padding: 0px;
	border-radius:15px;
}
.popupText {
	vertical-align: middle;
	line-height: 184px;
	text-align: center;
}
.close {
	position: absolute;
	top: 5px;
	right: 10px;
}
h1, h3 { text-align: center; }

JavaScript

$(document).ready(function(){
    
    $("#popupBox").slideDown("slow");
    window.setTimeout(function() {
        $("#popupBox").slideUp("slow");
    },300000);
    
    $(".close").click(function(){
        $("#popupBox").slideUp();
    });
});