JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<div class="leftImgDiv">
<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1" :="" border="" width="2000" height="2000"/>
</a>
    
<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://www.brookstone.com/webassets/product_images/700x700/833371p.jpg" width="252" height="252"/>
    </a>    

<a href="#" class="imageIconLink">
    <img class="smallImage" src="http://slimages.macys.com/is/image/MCY/products/8/optimized/2546128_fpx.tif?01AD=31absA3WJUG8eGA5NUMCutd7x16A-v8cmsm4k_DZNgdpUvQGEe2iugA&amp;01RI=958CD8AFBE261DF&amp;01NA=&amp;wid=1320&amp;hei=1616&amp;fit=fit,1&amp;$filterlrg$"/>
</a>

<a href="#" class="imageIconLink">
    <img class="smallImage"
    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />
</a>
    
    
<a href="#" class="imageIconLink">
    <img class="smallImage"
    src="http://www.u3j.org/wp-content/uploads/2014/07/uncategorized-amazing-where-to-buy-leather-sofa-in-malaysia-where-to-buy-leather-furniture-repair-kits-where-to-buy-leather-furniture-repair-kit-where-to-buy-leather-furniture-in-bali-where-to-bu.jpg" />
</a>
</div>    
    
<div class="rightImgDiv">
    <img class="largeImage" src="http://s7d1.scene7.com/is/image/BedBathandBeyond/33748242127673p?hei=2000&amp;wid=2000&amp;qlt=50,1"/>
</div>

CSS

.smallImage {
    height: 80px; width: 80px; border: 0px solid;
}

.largeImage {
    height: 280px; width: 380px; border: 0px solid;
}

.leftImgDiv {
    width : 20%;
    float : left;
    height : 300px;
    overflow : auto;
}

.rightImgDiv {
    width : 80%;
    float : right;
}

JavaScript

$(".imageIconLink").click(function() {
    
    var imgSrc= $(this).find("img").attr("src");
    
    $(".largeImage").attr("src", imgSrc); 
});