JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>
<br />
Hover over the boxes, they'll resize (easing works for the "FLUID" box).
<br /><br />
However, only Webkit browsers use transitions when the page is resized.
CSS
.trans {
-webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; -o-transition-duration: 1.2s;
}
div:hover {
height: 120px; width: 150px; line-height: 120px;
}
.box {
background: #5599ff; text-align: center;
line-height: 80px; height: 80px; width: 100px;
font-family: arial, helvetica; color: #FFF;
-webkit-border-radius:3px; -moz-border-radius: 3px; border-radius: 3px;
margin: 10px
}