JSFiddle - React, Tailwind, and code Playground

by Turi S

HTML

<div class="box animate">

</div>
<hr>
<button class="button1">
  Toggle Color
</button>

<button class="button2">
  Toggle Shape
</button>

CSS

.box {
  width: 200px;
  height: 200px;
  background: orange;
  
}
.animate { transition: all 1s ease; }

.box.blue { background: blue; }

.box.wide { width: 400px; }

JavaScript

$('.button1').click(function(){
	var $box = $('.box');
  $box.removeClass('animate');
	$box.toggleClass('blue');
  setTimeout(function(){
  	$box.addClass('animate')
    },5);
});

$('.button2').click(function(){
	var $box = $('.box');
  
	$box.toggleClass('wide');
});