JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://jqueryrotatezoom.googlecode.com/svn/trunk/jQueryRotateZoom.js"></script>
<img src="https://www.google.com/images/errors/robot.png" id="image" width='10%'>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image1" width='10%' style="position:absolute; top:5%; right:5%">
<div style="margin:auto; left:25%; position:absolute">Click on the images to check the fun</div>

CSS

.img_enlarge {
    border: 1px solid #C5C5C5;
    margin: auto;
    position: absolute;
    z-index: 100;
    padding: 12px;
    background: #E3E3E3;
}

.close_button {
    cursor: pointer;
    position: absolute;
    top: -10%;
    right: -5%;
    z-index: 102;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
img{
    cursor : pointer;
}

JavaScript

var rotation1 = function (){
    $(".img_enlarge img").rotate({
      angle:0, 
      animateTo:720,
      limitWidthPercent:70,
      duration:2000,
   });
}    

var rotation2 = function (){
    $(".img_enlarge img").rotate({
      angle:360, 
      animateTo:0,
      callback: function(){$(this).parent().remove()},
   });
}    
    
var rotation3 = function (){

    $("#image1").rotate({
      angle:0, 
      animateTo:360,
    dontZoom:true,
   });
} 
        
$('#image').on('click',function(e){
    $('body').append('<div class="img_enlarge" style="display:none"><button class="close_button">x</button></div>');
    $('#image').clone().appendTo($('.img_enlarge'));
    $(".img_enlarge img").css({width: 0});
    rotation1();
    $('.img_enlarge').show();
    $('.img_enlarge button').on('click',function(){
        var my_button = $(this);
        $(this).hide();
        rotation2();
    })
})
        
$('#image1').on('click',function(){
    rotation3();
})