JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<hmtl>
    <head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
<title>Preview</title>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
    </head>
<body>
        <table>
            <img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none"/>
            <tr>
            <td>
            <p><div id="for_jcrop">here the image should apear</div>
                <canvas id="rotate"></canvas>
            </td>
            </tr>
        </table>
        <p>
            <strong>Rotate Image: </strong>
            <a href="javascript:;" id="resetImage">Reset Image</a>
            <a href="javascript:;" id="rotate90">90&deg;</a>
        </p>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    </body>
</html>

CSS

#picture {
    height: 450px;
}

JavaScript

var img = null, canvas = null;

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

    $(document).ready(function(){
       //  Initialize image and canvas
       img = document.getElementById('picture');
       canvasR = document.getElementById('rotate');
       
       
       if(!canvasR || !canvasR.getContext){
           canvasR.parentNode.removeChild(canvas);
       } else {
           img.style.position = 'relative';
       }
               
              rotateImage(0);
               
            showImg();
            
       //  Handle clicks for control links
       $('#resetImage').click(function(){ rotateImage(0); });
       $('#rotate90').click(function(){ rotateImage(90); });
       $('#rotate180').click(function(){ rotateImage(180); });
       $('#rotate270').click(function(){ rotateImage(270); });
       $('#flipH').click(function(){ rotateImage(1); });
       $('#flipV').click(function(){ rotateImage(2); });
    });

function showImg (){    
var image = new Image();
image.id = "pic";
var canvas = document.getElementById('rotate');
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
}
    
    function rotateImage(degree)
    {
        if(document.getElementById('rotate')){
           var cContext = canvasR.getContext('2d');
           var cx = 0, cy = 0, h = 1, v = 1;
           
                      var pictureR = $('#picture');
                var displayedImgR = {
                width: pictureR.width(),
                height: pictureR.height()
                };
           
           var cw = displayedImgR.width, ch = displayedImgR.height, sAcw = displayedImgR.width, sAch = displayedImgR.height;
           //   Calculate new canvas size and x/y coorditates for image
           switch(degree){
         ...