JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">This is Div#1</div>
<br/>
<div id="div2">This is Div#2</div>

CSS

#div1 {
    background-color:green;
    color:white;
    font-family: Arial;
}
#div2 {
    background-color:green;
    color:white;
    font-family: Arial;
    width:200px;
    height:200px;
}

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

JavaScript

$("#div1").click(someFunction);
$("#div2").click(someFunction2);

function someFunction() {
    $("#div1").html("Clicked me");
    $("#div1").css({
        "background-color": "black"
    });
}

function someFunction2() {
    $(this).addClass('box_rotate box_transition');
}