JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="toggleclass">
    click me
</div>

CSS

#toggleclass{
    position : absolute;
    top : 50px;
    left : 50px;
    height : 100px;
    width : 100px;
    background-color : red;
    color : black;
    opacity : 0.3;
    line-height : 100px;
    font-size : 25px;    
    text-align : center;
    cursor: pointer;
    
    -webkit-transition : all ease-in 1s;/*chrome & webkit*/
    -moz-transition : all ease-in 1000ms;/*firefox*/
    -o-transition : all ease-in 1s;/*opera*/
    -ms-transition : all ease-in 1s;/*msie 9+*/
    -khtml-transition : all ease-in 1s;/*??? konqueror cred*/
    transition : all ease-in 1s;/*non-vendor*/
    
    -webkit-transition-delay : 500ms;
    -moz-transition-delay : 500ms;
    -o-transition-delay : 500ms;
    -ms-transition-delay : 500ms;
    -khtml-transition-delay : 500ms;
    transition-delay : 500ms;

}
#toggleclass.active{
    left : 100px;
    top : 0px;
    background-color : green;
    opacity : 1;
    width : 50px;
    height : 200px;
    line-height : 200px;
    text-decoration : underline;
    font-size : 10px;
    color : rgb(200,102,3);
    
     -webkit-transition-delay : 0;
    -moz-transition-delay : 0;
    -o-transition-delay : 0;
    -ms-transition-delay : 0;
    -khtml-transition-delay : 0;
    transition-delay : 0;
}

JavaScript

$('#toggleclass').click(function(){
    $(this).toggleClass('active');
});