JSFiddle - React, Tailwind, and code Playground

HTML

<div class="shape"></div>

CSS

.shape {
  margin-top: 5em;
  margin-left: 5em;
  width: 15em;
  height: 15em;
  background-color: blue;
  transition: border-radius 2s ease-in-out, transform 2s ease-in-out, background-color 2s ease-in-out;
}
.shape:hover {
  border-radius: 30% 70% 70% 30% / 20% 80% 20% 80%;
  transform: rotate(110deg) scale(0.5);
  background-color: green;
}