JSFiddle - React, Tailwind, and code Playground

HTML

<div id="prodoneid" class="prodcls"> 
    <img src="images/thumbnail/zara/1.png" alt="ZARA"/> </div>

    <div id="prodtwoid" class="prodcls">
    <img src="images/thumbnail/zara/2.png" alt="ZARA"/>
    </div>

    <div id="prodthreeid" class="prodcls">
    <img src="images/thumbnail/puma/1.png" alt="PUMA"/>
    </div>

    <div id="prodfourid" class="prodcls">
    <img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
    </div>

CSS

div.prodcls img:hover {
  cursor: pointer;
}

JavaScript

$(function () {

  $(document).on('click', 'div.prodcls img', function (e) {
    e.preventDefault();
    window.open($(this).attr('src').replace('/thumbnail', ''), '');
  });

});