JSFiddle - React, Tailwind, and code Playground

by Emraan Ali

HTML

<h1 style="background-color:orange; color:#FFFFFF;"> now both transition and transformation effect applyed in this element</h1>
<div>Rotate</div>

CSS

div {
    width: 100px;
    height: 100px;
    background: green;
    transition: width 2s, height 2s, transform 2s;
	color:#FFFFFF;
	text-align:center;
	font-size:24px;	
}
div:hover {
    width: 150px;
    height: 150px;
   transform: rotate(180deg);
}