JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<div id="seventyfive" style="position:absolute; font-size:10px; font-weight:bold">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/200px-Heart_coraz%C3%B3n.svg.png" style="width:50px"/>
</div>

JavaScript

var on = true;
function pulse(back) {
  
   $('#seventyfive').animate(
        {
            'font-size': (back) ? '10px' : '15px',
            opacity: (back) ? 0.3 : 1
        }, 600, function(){pulse(!back)});
    $('#seventyfive img').animate(
        {
            'width': (back) ? '50px' : '40px'
        }, 600);
   
}
pulse(!on); // call once

$("#seventyfive").click(function(){
    
    on = !on;
    pulse(on);

});