JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div>
  Super content goes here!
</div>

<div id="ph_lf_overlay">
            <div id="ph_lf_popup_close"></div>
             <div id="ph_lf_popup">
                 <div class="ph_lf_wrapper">
                     <div class="ph_lf_col">
                         <h2>Lorem Ipsum!</h2>
                         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
                         <div id="ph_lf_btn"><a href="http://www.profi-homepage.de" target="_blank" title="Klicken">Klick mich!</a></div>
                     </div>
                     <div class="ph_lf_col ph_lf_img">
                         <img src="http://www.profi-homepage.de/wp-content/uploads/2016/06/leitfaden-preview.png" alt="Leitfaden"> 
                     </div>
                 </div>
             </div>
         </div>
</body>

CSS

#ph_lf_overlay {
    background: rgba(117, 117, 117, 0.8) none repeat scroll 0 0;
    height: 100%;
    left: 50%;
    position: fixed;
    text-align: center;
    top: 0;
    transform: translateX(-50%);
    transition: all 1s ease 0s;
    width: 0;
    z-index: 99999999;
    overflow-y: auto;
}

#ph_lf_overlay img{
    max-width:100%;
    width:316px;
}

#ph_lf_popup {
    background-color: white;
    border: 2px solid #333;
    box-shadow: 0 0 7px #404040;
    display: inline-block;
    margin: 5% auto;
    max-width: 1100px;
    opacity: 0;
    padding: 20px;
    transition: all 0.5s ease 0s;
    width: 80%;
    opacity:0;
    text-align:left;
}
.ph_lf_col {
    display: inline-block;
    float: left;
    width: 50%;
}

#ph_lf_popup_close {
    background: rgba(0, 0, 0, 0) url("http://www.profi-homepage.de/wp-content/uploads/2016/06/cross.png") no-repeat scroll 0 0;
    cursor: pointer;
    height: 58px;
    position: absolute;
    right: 50px;
    top: 50px;
    transition: all 1s ease 0s;
    width: 58px;
    opacity:0;
}

#ph_lf_popup_close:hover {
    transform:rotate(180deg);
}

#ph_lf_btn > a{
    background-color: rgb(246, 139, 36);
    border: 1px solid rgb(246, 139, 36);
    border-radius: 6px;
    color: #ffffff;
    display: inline-block;
    font-size: 20px;
    line-height: normal;
    margin-bottom: 30px;
    margin-top: 10px;
    padding: 6px 14px;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

#ph_lf_btn > a:hover{
    background-color: #777;
    border: 1px solid #777;
    text-decoration: none;
}

.ph_lf_img{
    text-align:center;
}

@media(max-width:991px){
    .ph_lf_col {
        display: inline-block;
        float: none;
        width: 100%;
    }
}


@media(max-width:1300px){
    #ph_lf_popup{
        max-width: 800px;
    }
    #ph_lf_popup_close{
        right:5px;
        top:5px;
    }
}

@media(max-width:767px){
    #ph_lf_popup_close{
        background-size: 25px 25px;
        height: 25px;
        width:...

JavaScript

jQuery(document ).ready(function() {
    
    //get cookie by name
    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length == 2) return parts.pop().split(";").shift();
    }
    
    // if cookie is set, dont show popup, else do
    if(getCookie("ph_lf_popup_seen") != "yes"){
    
     
       //show popup after 5 sec
        setTimeout(function() {
            jQuery( "#ph_lf_overlay" ).css("width","100%");
        },5000);
        setTimeout(function() {
            jQuery( "#ph_lf_popup, #ph_lf_popup_close" ).css("opacity","1");
            jQuery( "body" ).css("overflow-y","hidden");
        },6000);
        
        //close popup on click
        jQuery("#ph_lf_popup_close, #ph_lf_btn a").click(function() {
            jQuery( "#ph_lf_popup, #ph_lf_popup_close" ).css("opacity","0");
            setTimeout(function() {
                jQuery( "body" ).css("overflow-y","auto");
                jQuery( "#ph_lf_overlay" ).css("width","0");
            },500);
            
            //poup is closed, set cookie
            var expDate = new Date();
            expDate.setTime(expDate.getTime() + 1*24*60*60*1000); 			//cookie expires in 1 day(s)
            document.cookie = "ph_lf_popup_seen=yes; expires="+expDate+";path=/";
        });
    
    }
});