JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      
      <div>
      
     
<div class="ls-overlay text-center">
        <div>
            <i class="fa fa-undo fa-4x" aria-hidden="true"></i>
            <h2>Turn your phone</h2>
            <p>Please use portrait mode to view this site correctly.</p>
        </div>
    </div>
    
    <h1>
    content
    </h1>
 </div>

CSS

/* LANDSCAPE OVERLAY*/

.ls-overlay{
    position: absolute;
    padding: 10%;
     height: 100%;
    width: 100%;
    z-index: 99999;
    left: 0;
    background: #fff;
    display: none;
}

.ls-overlay i {
     animation: rotate 2s linear infinite;
     color: rgba(26, 129, 221, 1);
      


}

/* ANIMATION */

@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
  }
}

JavaScript

if ((window.innerHeight > window.innerWidth) === true) // Portrait
  {
    $('.ls-overlay').css("display", "none");
        console.log("not displaying the overlay");
  }
  else // Landscape
  {
    $('.ls-overlay').css("display", "block");
        console.log("displaying the overaly");
  }