JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-essential">
	<div class="product-essential-b1">
    <div class="product-img-box">
      <p class="video" id="video-btn">
        <a target="_blank" class="v2">Video</a>
      </p>
      <div class="ldesktop">
        <div id="product-media">
         <div class="product-image">
            <div>
                <img src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg" id="image">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cloudzoom-blank" style="position: absolute; top: 28px; left: 29px;">
  <div class="cloudzoom-lens" style="overflow: hidden; position: absolute; top: 27px; left: 15px;">
    <img style="position: absolute; left: -18px; top: -46px; max-width: none; width: 465px; height: 465px;" src="https://i.pinimg.com/474x/9d/d3/e5/9dd3e53d4d13d5000ef67028c8b03998.jpg">
  </div>
</div>

CSS

.cloudzoom-blank {
    z-index: 10;
    width: 465px;
    height: 465px;
}

.cloudzoom-lens {
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    cursor: move;
    z-index: 10;
}




.product-essential {
    position: relative;
    top: 0;
    left: 0;
}

.product-essential-b1 {
    float: left;
}

.product-img-box {
    position: relative;
    z-index: 3;
    float: left;
    width: 465px;
    margin-left: 16px;
    background: #FFF;
}

.product-img-box .product-image {
    width: 465px;
    height: 465px;
    padding: 0px;
    border: 2px solid #E8E8E8;
    background: #FFF;
}

.product-img-box .product-image div {
    position: relative;
}

.product-img-box .product-image img#image {
    position: relative;
    width: 465px;
    height: 465px;
    opacity: 0.85;
}

.product-img-box .video {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 100;
    cursor: pointer;
}

.v2 {
    float: left;
    width: 41px;
    height: 41px;
    text-indent: -9999px;
    background: #F22;
}