JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    
}

div:hover {
    -webkit-animation: all 2s; /* Chrome, Safari, Opera */ 
    animation: all 2s;
    animation-fill-mode: forwards;
}

@-webkit-keyframes all {
    0%   {width: 100px; height: 100px;}
    50%  {width: 300px; height: 100px;}
    100% {width: 300px; height: 500px;}
}

</style>
</head>
<body>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>