JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cartel">
<div class="infocartel">
<a href="#">Cerrar</a><br />
CARTELITO PUBLICITARIO<br />
</div>
</div>

CSS

#cartel {
  background: rgba(0,0,0,0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
}
.infocartel {
  background: #fff;
  margin: 80px auto;
  width: 400px;
  padding: 20px;
}

JavaScript

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return false;
}

(function() {
  var cerrar = document.querySelector('a');
  var cartel = document.querySelector('#cartel');
  if (getCookie("cartel")) {
    cartel.style.display = 'none';
  }else {
    cartel.style.display = 'block';
    cerrar.addEventListener('click', function() {
      cartel.style.display = 'none';
      setCookie("cartel", "publicitario", 1);
    });
  }
})();