JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<div id="show_area">
<img src="">
</div>

<!-- selection list -->

<div id="view1">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/mVgTJbt4qek/s46-c-k-no/photo.jpg"></a>
</div>

<div id="view2">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view3">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view4">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view5">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

<div id="view6">
 <div class="info">
  <span>Product: Info</span>
  <span>Description: Info</span>
 </div>
  <a href="#"><img src="/thumb.jpg"></a>
</div>

JavaScript

$(function() {
    
      $('a img').click(function() {
       $('#show_area img').hide();
    $('#show_area img').attr('src','https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAABSw4/fNj-YFu4lgw/s120-c/photo.jpg').stop().fadeIn();
      });
});