JSFiddle - React, Tailwind, and code Playground

by MikeWhatsUp

HTML

<div id = "transitionTest"></div>

CSS

.FirstClass    {background-color: red;
        height: 50px;
        width: 50px;
        top: 0px;
        position: relative;
        -webkit-transition: top 2s linear;
        -moz-transition: top 2s linear;
        transition: top 2s linear;}
                             
.MotionClass{background-color: red;                                                      
             height: 50px;width: 50px;top: 200px;position: relative;}

JavaScript

var TestDiv;

TestDiv = document.getElementById("transitionTest");
TestDiv.className = "FirstClass";
TestDiv.onclick = AddClass;
            
            function AddClass(){
                TestDiv.className = "FirstClass MotionClass";
            }