JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Zoom fade/smoothing</title>
        <link href="http://www.magictoolbox.com/static/magiczoom/magiczoom.css" rel="stylesheet" type="text/css" media="screen"/>
        <script src="http://www.magictoolbox.com/static/magiczoom/magiczoom.js" type="text/javascript"></script>
    </head>
    <body>
        <br style="margin-top: 250px" />
  <h2>Top zoom with fade and low-speed</h2>
    <p><a href="http://www.magictoolbox.com/static/images/r6-large.jpg" rel="zoom-position:top; zoom-width:482px; zoom-height:240px; zoom-fade:true; zoom-fade-in-speed:3000; smoothing-speed:15;" class="MagicZoom"><img src="http://www.magictoolbox.com/static/images/r6-small.jpg" alt="Yamaha R6"/></a></p>
              
    </body>