JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popup-wrap">
    <div id="popup">
        <div id="popup-close">&times;</div>
        <a href="http://www.architecturaldigest.com/" target="_blank">
            <img src="http://www.architecturaldigest.com/magazine/table-of-contents/2015-march/_jcr_content/par/cn_contentwell/par-main/cn_features_containe/cn_manual_feature/cn_image.size.AD-2015-03-march-cover-new.jpg" width="100">
        </a>
        <h2>We are featured this month in Architectural Digest!</h2>
        <a href="http://www.architecturaldigest.com/" target="_blank">Read the article &raquo;</a>
    </div>
</div>

CSS

#popup-wrap {
	background: #fff;
	box-shadow: 1px 0 3px #999;
	display: none;
	font-family: 'montserrat', sans-serif;
	height: 210px;
	left: 50%;
	margin-left: -250px;
	margin-top: -105px;
	opacity: .8;
	position: absolute;
	text-transform: uppercase;
	top: 50%;
	width: 500px;
	z-index: 11;
}

#popup {
	padding: 40px;
	position: absolute;
}

#popup-close {
	cursor: pointer;
	font-size: 36px;
	position: absolute;
	right: 10px;
	top: 0;
}

#popup img {
	float: left;
	margin-right: 20px;
}

#popup h2 {
	color: #222;
	font-size: 20px;
	margin-bottom: .5em;
}

#popup a {
	font-size: 12px;
	text-decoration: none;
}

JavaScript

if (localStorage.getItem('popState') != 'shown'){
        $("#popup-wrap").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $('#popup-close').click(function(e) {
        e.preventDefault();
        $('#popup-wrap').fadeOut(); // Now the pop up is hidden.
    });