JSFiddle - React, Tailwind, and code Playground

HTML

<div class="projects-takeover">
  <div class="projects-close training-directory-methodology-stage-class-icon">x</div>
    <div class="projects-content">
      <h1>My Awesome Title</h1>
      <p>My Awesome sub head</p>
      <div class="project-video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/B00P8nzckoY" frameborder="0" allowfullscreen></iframe>
      </div>
      
      <div class="academy-square-button academy-square-button-orange">
    Try Now
    </div>
  
</div>

CSS

.projects-takeover{
  background:rgba(74, 92, 104, 0.88);
  display:block;
  width:100%;
  height:100%;
  position:absolute;
}

.projects-close{
  position:absolute;
  right:20px;
  top:20px;
}

.projects-content{
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:white;
  width:800px;
  
}



h1{
      color: #FFF;
    font-family: proxima-nova,"Helvetica Neue",Helvetica,arial,sans-serif;
    font-weight: 300;
    line-height: 1.5em;
    text-rendering: optimizelegibility;
    margin: 1em 0 0;
      margin-top: 0 !important;
    text-align: center;
    font-weight: 600;
    font-size: 2em;
    color: #FFF;
}

p{
      font-size: 1em;
    line-height: 1.75em;
    color: #FFF;
    text-align:center;
    max-width:600px;
  margin:0 auto 1.5em;
}

.project-video iframe{
  margin:0 auto;
  display:block;
}

.academy-square-button {
    padding: 20px;
    text-align: center;
    font-size: 18px;
    color: #FFF;
  width:200px;
  margin:20px auto;
  
}

.academy-square-button-orange {
    background-color: #fb8a27;
    box-shadow: 0 5px 0 #e57725;
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    -ms-transition: box-shadow .3s;
    transition: box-shadow .3s;
}

JavaScript

$(function() {

    if (localStorage) {
        if (!localStorage.getItem('visited')) { 
            $('.projects-takeover').show(); 
        }
    } else { 
        $('.projects-takeover').show();
    }

    $('.projects-close').click(function() {
            $('.projects-takeover').fadeOut();
    });
        localStorage.setItem('visited', true);
        return false;
    });