JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

CSS

.box{
    width:250px; height:50px;
    background:blue;
    border: 1px solid black;
    position:fixed;
    left: 50%;
    margin-left:-125px;
    top:150px;
    
    animation: fall 1.5s ease-in, swing 4s  ease-in-out;
    -webkit-animation: fall 1.5s ease-in, swing 4s  ease-in-out;
    -moz-animation: fall 1.5s ease-in, swing 4s  ease-in-out;
}
@-moz-keyframes fall{
   0% {top: -50px;}	
    100% {top: 150px;}
}
@-webkit-keyframes fall{
   0% {top: -50px;}	
    100% {top: 150px;}
}
@-moz-keyframes swing{
    -moz-transform-origin: center top;
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(-2deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    -webkit-transform-origin:center top;
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(-2deg)}
    100%{-webkit-transform:rotate(-3deg)}
}