JSFiddle - React, Tailwind, and code Playground

by edelman

HTML

<div id="square"></div>
<p>Fatback pancetta sirloin beef prosciutto. Ball tip ribeye ham, boudin cow t-bone venison frankfurter turkey rump tenderloin flank pig pork loin. Chicken t-bone tongue, cow tenderloin hamburger brisket short ribs flank venison. Jowl pig pork loin tongue. Ground round chicken pig turducken brisket capicola beef ribs turkey ham hock, shank beef fatback flank ham rump. Tongue chicken shoulder, sirloin jowl flank leberkäse turducken bacon sausage. Venison bacon chicken brisket, sirloin pork chop pancetta tenderloin pig biltong frankfurter leberkäse.</p>

CSS

#square {
    width: 10px;
    height: 10px;
    margin: 100px auto; /*for centering purposes*/
    background: blue;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    transition: transform 1s;
}
#square:hover {
    -webkit-transform: scale(20);
    -moz-transform: scale(20);
    -ms-transform: scale(20);
    transform: scale(20);
}