JSFiddle - React, Tailwind, and code Playground

by mschwar99

HTML

<p style="margin:10px;"><button type="button" id="clicky">Click me to Animate</button></p>
<div id="box"></div>
<div id="box2"></div>

CSS

#box, #box2 {
  height:20px;
  width:50px;
  margin:50px;
  border:2px solid #00cc00;
  -webkit-transition: all 0.80s ease-in-out;
  -moz-transition: all 0.80s ease-in-out;
  -ms-transition: all 0.80s ease-in-out;
  -o-transition: all 0.80s ease-in-out;
  -webkit-box-shadow:0 0 20px #0f0;
  -moz-box-shadow: 0 0 20px #0f0;
  box-shadow:0 0 20px #0f0;
  float:left;
}

#box.grow, #box2.grow {
  height:150px;
}

JavaScript

(function () {
  $(function () {
    $('body').css('background-color', '#000');
    $("#clicky").click(function () {
      $("#box").toggleClass("grow");
    });
    var go = function () {
      $("#box2").toggleClass("grow");
    };
    setInterval(go, 1500);
  });
})()