JSFiddle - React, Tailwind, and code Playground

by Anton Spirin

HTML

<div class="block block-animated" />

CSS

body {
  background-color: #20262e;
}

.block {
  position: absolute;
  top: 0;
  width: 50px;
  height: 20px;
  background-color: white;
  border-radius: 10px;
  transition: top, transroform 0.5s;
}

.block-animated {
  animation: box 2s ease-in forwards;
}

@keyframes box {
  50% {
    top: 60px;
    transform: rotate(0deg);
  }
  100% {
    top: 60px;
    transform: rotate(45deg);
  }
}