JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <article class="box">
    <div class="box-left">
    </div>
    <div class="box-right">
      <h3>Age Verification</h3>
      <p>This site requires you to be 21 years or older to enter. </p>
      <p>By clicking 'YES', I certify that I am 21 years or older.</p>

      <a href="#" class="btn btn-alpha">YES</a>

      <a href="#" class="btn btn-beta">NO</a>
    </div>
  </article>

  <div class="overlay-verify"></div>
</main>

CSS

/*----------------------------------------------   
-Defualt to border-box
-----------------------------------------------  */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font-family: helvetica;
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-weight: 400;
  font-family: Raleway;
  line-height: 1.4;
}


/*----------------------------------------------   
--Fluid body sizing
-----------------------------------------------  */

body {
  font-size: 100%;
}

@media (min-width: 32em) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 54em) {
  body {
    font-size: 111%;
  }
}

@media (min-width: 74em) {
  body {
    font-size: 115%;
  }
}

@media (min-width: 96em) {
  body {
    font-size: 135%;
  }
}

a.btn {
  background-color: #e3c827;
  color: #000;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}

a.btn.btn-beta {
  background-color: #800000;
}

.overlay-verify {
  background: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.box {
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  width: 70%;
  height: 40%;
  display: table;
}

.box .box-left,
.box .box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {

  .box .box-left,
  .box .box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}

.box .box-left p,
.box .box-right p {
  position: relative;
  z-index: 3;
}

.box .box-left {
  background: url(https://www.distillery.news/wp-content/uploads/2018/03/84743_Hochatown-2.jpg) 50% 50%;
  background-size: cover;
}

.box .box-left img {
  position: relative;
  z-index: 1;
  width: 9em;
}

.box .box-left:after {
  content: '';
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
 ...

JavaScript

jQuery(document).ready(function($) {

  if (sessionStorage.getItem('advertOnce') !== 'true') {
    $('.box').show();
  } else {
    $('.box').hide();
  };

  $('.btn-alpha').click(function() {
    sessionStorage.setItem('advertOnce', 'true');
    $('.box').hide();
  });

  $('.btn-beta').click(function() {
    window.location.href = 'http://google.com/';

  });
});