JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="transition">Transition (breaks cursor on hover)</a>
<a href="#">No transition (works if you didn't hover directly from the transition box)</a>
CSS
a {
float: left;
margin: 10px;
display: block;
width: 150px;
height: 100px;
border: 3px solid #666;
}
a:hover {
-moz-transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
-webkit-transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
-o-transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
-ms-transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
transform: scale(1.2) rotate(0deg) skew(0deg, 0deg);
}
a.transition {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;