JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="popupWrapper">
  <div class="popup">
    <style>
      @media screen and (max-width: 600px){
        .test{
          width:100vw !important;
        }
      }
    </style>
    <div class="test" style="width:600px;">
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
            dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
            dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
      dawdawdwddawdawawd<br/>
    </div>
  </div>
</div>

CSS

@keyframes name{
  0%{
    box-shadow: 0px 0px 3px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,-900px) rotateX(90deg);
  }
  20%{
    box-shadow: 0px 0px 42px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg);
  }
  30%{
    box-shadow: 0px 0px 42px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,20px) rotateX(0deg);
  }
  40%{
    box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg);    
  }
  100%{
    box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
    transform: translate3d(0px,0px,0px) rotateX(0deg); 
  }
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:lightgrey;
}

.popupWrapper{
  position:fixed;
  overflow:auto;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.popup{
  margin:50px 0;
  transform-style: preserve-3d;
  width:auto;
  height:auto;
  background:white;
  border-radius:3px;
  box-shadow: 0px 0px 10px rgba(68, 68, 68, 0.42);
  animation: name 2.3s ease;
  transform:translate3d(0px,0px,0px);
}