JSFiddle - React, Tailwind, and code Playground

HTML

<div id="note">
    <p>It is recommended that you use landscape mode for a better experience (Turn your phone sideways).</p>     
    <a id="close">[Dismiss]</a>
</div>

CSS

#note {
    visil
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: white;
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #000000;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

.cssanimations.csstransforms #close {
  display: none;
}

JavaScript

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
    document.getElementById("note").style.visibility = "block";
}

close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);