JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="p">
  <div class="c"></div>
</div>

CSS

body{
display: flex;
align-items: center;
  justify-content: center;
}

.p{
  display: flex;
align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  /* border: solid 1px silver; */
  box-shadow: 0 0 0 1px silver;
  transition: 0.3s;
}

.c{
  width: 50px;
  height: 50px;
  background: red;
  transition: 0.3s;
}

.p:hover{
  transform: scale(2);
}

.p:hover .c{
  transform: scale(0.5) translate3d( 0, 0, 0);
}