JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    
    <li id="blue"><div id = "transitionTest"></div></li>
    <li id="blue"><div id = "transitionTest"></div></li>
    <li id="blue"><div id = "transitionTest"></div></li>
    
    </ul>

CSS

#transitionTest{background:red; width:50px; height:50px; position:relative; cursor:pointer; -webkit-transition: all 350ms linear;
            -moz-transition: all 350ms linear;
            transition: all 350ms linear; cursor:pointer;}
#blue{float:left; margin:10px; width:50px; height:50px; position:relative;}


                             
.MotionClass{background-color: red;                                                      
             height: 100px; width:100px; position: relative;
            -webkit-transition: all 350ms linear;
            -moz-transition: all 350ms linear;
            transition: all 350ms linear; cursor:pointer;}

JavaScript

jQuery(document).ready(function(){
$("#transitionTest").mouseover=function(){
    $("#transitionTest").addClass("MotionClass");

};

});