JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<div id="box"><p>text</p></div>

CSS

#box {
    width:100px;
    height:100px;
    /*
    background-color:#ddd;
    */
    color:#000;
    border:1px solid #ccc;
    margin:20px;
}
#box p {
    width:100%;
    text-align:center;
    padding:0px;
    padding-top:30px;
}

JavaScript

var state = 1;


    $('#box').click(function() {
        //alert('clicked');
        if(state == 1) {
            state = 2;
            $(this).animate({'backgroundColor':'#fff'});
        } else if(state == 2) {
            state = 1;
            $(this).animate({'backgroundColor':'#ddd'});
        }
    });