JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97100&w=350&h=100" onclick="changeImage('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=100');">
	<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97200&w=350&h=200" onclick="changeImage('https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97200&w=350&h=200');">
</div>

<div>
  <img id="Image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
</div>

JavaScript

function fadeIn(el) {
  el.style.opacity = 0;


  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.01;


    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}
//taken from http://stackoverflow.com/questions/23244338/pure-javascript-fade-in-function

function changeImage(a) {
    var el = document.getElementById("Image");
    el.src = a;
    fadeIn(el)
}