JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fadeOut">
    <img src='http://www.grvisualisation.50webs.com/images/surfaceplot/surfaceplotScreenShot1.png'/>
    Here's some text
</div>

<div id="fadeIn">
    <img src='http://www.grvisualisation.50webs.com/images/surfaceplot/surfaceplotScreenShot6.png'/>
    Different text
</div>

CSS

#fadeOut {
    background: #000;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 125px;
}

#fadeIn {
    background: #000;
    color: #fff;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 125px;
}

JavaScript

$('#fadeOut').click(function() {
  
  $('#fadeOut').fadeOut('slow');
    
  $('#fadeIn').fadeIn('slow');
    
});