JSFiddle - React, Tailwind, and code Playground

HTML

<div class="straight">
  Straight
</div>
<div class="rotated">
  Rotated
</div>

CSS

div {
  text-align: center;
  font-size: 36px;
  width: 140px;
  height: 50px;
}

.straight {
  background: linear-gradient(135deg, #1e5799 0%,#2989d8 34%,#207cca 70%,#7db9e8 100%);
}

.rotated {
  animation: rotate-me 3s ease 0s infinite alternate;
  transform-origin(50%, 50%);
  background: linear-gradient(135deg, #f0b7a1 0%,#8c3310 27%,#752201 63%,#bf6e4e 100%);
}

@keyframes rotate-me {
  from {
    transform: translate(200px, 100px) scale(1.5, 1.2) rotate(15deg)
  }
  
  to {
    transform: translate(200px, 100px) scale(4, 3) rotate(360deg)
  }
}