JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theImage">
    <img id="mainImg" src="images/1.png" width="256" height="256" />
</div>
<img id="img1" src="images/1.png" class="thumb" />
<img id="img2" src="images/2.png" class="thumb" />
<img id="img3" src="images/3.PNG" class="thumb" />

CSS

#theImage{
    width:256px;
    height:256px;
}
#mainImg {
    background: #f00;
    width:256px;
    height:256px;
    display: block;
}
.thumb{
    width:100px;
    height:100px;
    cursor:pointer;
    margin-right:20px;
    margin-left:20px;
    background: #c00;
    display: block;
    float: left;
}

JavaScript

function changeImage(e) {
    e.preventDefault();
    var that = this;
    $("#mainImg").fadeOut("slow", function() {
        this.src = that.src;
        $(this).fadeIn("slow");
    });
}

$(function(){
    $("#img1,#img2,#img3").click(changeImage);
});