JSFiddle - React, Tailwind, and code Playground

HTML

<div id="circle"></div>

CSS

#circle {
  position: relative; /* 1 */
  transform: translate(-50%, -50%); /* 2 */
  width: 100px;
  height: 100px;
  background: red;
  left: 200px;
  top: 200px;
  transition: width .7s, height .7s;
  border-radius: 50%;
}

#circle:hover {
  height: 300px;
  width: 300px;
}