JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tempsend.com/7C410BA87B/5C5B/jquery.jqzoom.css">
<script src="http://tempsend.com/398E1DDD31/8BBB/jquery.jqzoom.js"></script>
<div class="product-block">
<div class="primary_block"> 
    
    <!-- left infos-->  
<div class="pb-left-column">
  <!-- product img-->        
  <div id="image-block" class="clearfix is_caroucel">
    <span class="sale-box no-print">
        <span class="sale-label">Sale!</span>
    </span>
    <span id="view_full_size">
      <a class="jqzoom" title="" rel="gal1" href="http://placehold.it/550x550">
        <img src="http://placehold.it/350x150" title="" alt="">
      </a>
    </span>
  </div> <!-- end image-block -->
                  
  <!-- thumbnails -->
  <div id="views_block" class="clearfix">  
    <a id="view_scroll_left" class="" title="Other views" href="javascript:{}">Previous</a>
    <div id="thumbs_list">
      <ul id="thumbs_list_frame">
        <li id="thumbnail_1">
          <a rel="{ gallery: 'gal1', 
                    smallimage: 'http://placehold.it/350x150',
                    largeimage: 'http://placehold.it/550x550'}"
             title="">
            <img class="img-responsive" id="thumb_1" src="http://placehold.it/150x150" alt="" title="" height="80" width="80">
          </a>
        </li>  
      </ul>
    </div> <!-- end thumbs_list -->
    <a id="view_scroll_right" title="Other views" href="javascript:{}">
      Next
    </a>
  </div> <!-- end views-block -->     
  <!-- end thumbnails -->
                                                            
  <p class="resetimg clear no-print">
    <span id="wrapResetImages" style="display: none;">
      <a href="" data-id="resetImages">
        <i class="fa fa-repeat"></i>
        Display all pictures
      </a>
    </span>
  </p>
</div>
      
    </div></div>

CSS

.product-block .primary_block {
  margin-left: -15px;
  margin-right: -15px;
}
.product-block .primary_block .pb-left-column {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .product-block .primary_block .pb-left-column {
    float: left;
    width: 58.33333333%;
  }
}
@media (min-width: 1200px) {
  .product-block .primary_block .pb-left-column {
    float: left;
    width: 50%;
  }
}
.product-block .primary_block .pb-left-column #image-block {
  background: white;
  border: 1px solid #d6d4d4;
  padding: 5px;
  position: relative;
  z-index: 1;
}
.product-block .primary_block .pb-left-column #image-block.is_caroucel {
  margin-left: 89px;
  margin-right: 0;
}
.product-block .primary_block .pb-left-column #image-block .sale-box {
  z-index: 50002;
  right: -5px;
  height: 85px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: -4px;
  width: 85px;
}
.product-block .primary_block .pb-left-column #image-block .sale-box .sale-label {
  background: #f44336;
  border-radius: 50%;
  color: #fff;
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 400;
  height: 50px;
  line-height: 20px;
  padding: 15px 5px;
  position: absolute;
  right: 20px;
  text-align: center;
  text-transform: uppercase;
  top: 20px;
  width: 50px;
  z-index: 111;
}
.product-block .primary_block .pb-left-column #image-block #view_full_size {
  cursor: pointer;
  display: block;
}
.product-block .primary_block .pb-left-column #image-block #view_full_size .zoomPad {
  z-index: auto !important;
  float: none;
}
.product-block .primary_block .pb-left-column #image-block #view_full_size img {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fbfbfb;
  width: 100%;
}
.product-block .primary_block .pb-left-column #image-block a.jqzoom div div img {
  max-width: 10000px;
  width: auto;
}
.product-block .primary_block...

JavaScript

$(document).ready(function() {
	$('.jqzoom').jqzoom({
		zoomType: 'innerzoom', //innerzoom/standard/reverse/drag
		zoomWidth: 458, //zooming div default width(default width value is 200)
		zoomHeight: 458, //zooming div default width(default height value is 200)
		xOffset: 21, //zooming div default offset(default offset value is 10)
		yOffset: 0,
		title: false
	});
});