JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
</p>

<div>
    <div class="animate">
        jhk
    </div>
</div>

<p>Hover over the div element above, to see the transition effect.</p>

CSS

div,
.animate {
    width: 100px;
    height: 100px;
}    
 
.animate {
    background: red;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    
}

div:hover > .animate {
    -webkit-transform:scaleX(0.06);
    -moz-transform:scaleX(0.06);
    -o-transform:scaleX(0.06);
    transform:scaleX(0.06);
}