JSFiddle - React, Tailwind, and code Playground

HTML

<button id="Ck">Click</button>
<button id="Me">Mouseover</button>
<br/>
<br/>
<br/>
<div id="Wp" style="width: 100px; height: 100px; background-color: #3333FF;"></div>

JavaScript

function SetupClick() {
  $("#Wp").toggle(function(){
        $("#Wp").animate({"width":"500"},"slow");
    },function(){
        $("#Wp").animate({"width":"100"},"slow");
    });
}

function SetupMouseover() {
  $("#Wp").mouseenter(function(){
        $("#Wp").animate({"width":"500"},"slow");
			});
				$("#Wp").mouseout(function(){
        $("#Wp").animate({"width":"100"},"slow");
			});
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});