JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="fpf">
    <div class="plzrotate">
        <div class="spinner">
            <div class="box"></div>
            <div class="dot"></div>
        </div>
        Please rotate your device
    </div>
</div>

CSS

body { background: #e3e3e3; }
.plzrotate {
   display: none;
}

@media screen and (max-height: 499px) and (orientation: landscape) {
   .fpf .plzrotate {
      display: block;
      text-align: center;
      /*font-size: 25px;*/
      margin: 0 20px;
      text-transform: none;
   }
   .closed.fpf .plzrotate{
      display: none;
   }
   .fpf .spinner {
      display: block;
      position: relative;
      background: #fff;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      width: 48px;
      height: 24px;
      background-size: 48px 48px;
      margin: 80px auto 20px;
      -webkit-animation: rotating 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      -moz-animation: rotating 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      -ms-animation: rotating 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      -o-animation: rotating 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: rotating 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      -ms-animation-delay: 1s;
      -o-animation-delay: 1s;
      animation-delay: 1s;
      -webkit-animation-direction: alternate;
      -moz-animation-direction: alternate;
      -ms-animation-direction: alternate;
      -o-animation-direction: alternate;
      animation-direction: alternate;
   }
   .fpf .dot {
      width: 6px;
      height: 6px;
      position: absolute;
      bottom: 8px;
      right: 2px;
      background: #000;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      -ms-border-radius: 100%;
      -o-border-radius: 100%;
      border-radius: 100%;
      z-index: 999;
   }
   .fpf .box {
      position: absolute;
      width: 34px;
      height: 18px;
      bottom: 3px;
      right: 10px;
      background: #000;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
     ...