JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div class="totalSpent">

</div>

<button id="btn">
Hello
</button>

CSS

.totalSpent{
  width : 100%;
  height: 100px;
 // background: blue;
  /* transition-property: transform;
  transition-duration: 14s; */
  /* transition-delay: 2s; */
}
//.totalSpent { transition: all 2s ease-in-out; }
//.test { transform: scaleX(1.1); }

JavaScript

$('#btn').click(function(){
	console.log('happen')
  //$('.totalSpent').attr('style', 'transform: scaleX(1.1);');
  $('.totalSpent').attr('style', 'transition: all 4s ease-in-out; transform: scaleX(1.1); height: 85vh !important; width: 92% !important; margin: 0 auto !important; top: 8% !important; left: 4%; position: absolute; z-index: 9999; background: #000 !important; box-shadow: rgba(255, 255, 255, 0.498039) 0px 0px 2px 1px; border-radius: 18px;');
})