JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<img src="http://www.darrobric.com/clients/dimming/1.jpg" class="thumbnail"
  alt="Image 1" width="20" height="20"/>

<img src="http://www.darrobric.com/clients/dimming/2.jpg" class="thumbnail"
  alt="Thumbnail 2" width="20" height="20"/>

    <div id="imageWrap">
        <img src="http://www.darrobric.com/clients/dimming/C.jpg" alt="Main Image" class="active" />
    </div>
</body>

CSS

#imageWrap{
    position:relative;
    overflow:hidden;
    height:400px;
    width:200px;
}
.next{
    display:none;
}
#imageWrap img{
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

$('.thumbnail').on('click',function(){
    $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
    $('#imageWrap .active').fadeOut(1000);
    $('#imageWrap .next').fadeIn(1000, function(){
        $('#imageWrap .active').remove();
        $(this).addClass('active');
    });

});