JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<section>
</section>

CSS

body {
  margin: 0;
}

div {
  width:150px;
  height:150px;
  background:#666;
  margin:150px;
  -webkit-animation:3s rotateAnimation;
  animation:3s rotateAnimation;
  transform:skew(30deg) rotate(180deg) translate(100px, 100px);
}
section {
  width:150px;
  height:150px;
  background:red;
  margin:0 150px;
  -webkit-animation:3s rotateAnimation;
  animation:3s rotateAnimation;
  -webkit-animation-delay:3s;
  animation-delay:3s;
}
@-webkit-keyframes rotateAnimation{
  0% {
    transform:rotate(0);
  }
  100% {
    transform:skew(30deg) rotate(180deg) translate(100px, 100px);
  }
}
@keyframes rotateAnimation{
  0% {
    transform:rotate(0);
  }
  100% {
    transform:skew(30deg);
  }
}