JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<ul id="thumbnail">
  <li><a href="http://i.imgur.com/RHhXG.jpg" class="thumbnail"><img src="http://i.imgur.com/g7Ljc.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/p1L2e.jpg" class="thumbnail"><img src="http://i.imgur.com/ZLjwJ.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/NsrI0.jpg" class="thumbnail"><img src="http://i.imgur.com/qN3JG.jpg" width="100" height="100" /></a></li>
  <li><a href="http://i.imgur.com/Ww6EU.jpg" class="thumbnail"><img src="http://i.imgur.com/CRsHb.jpg" width="100" height="100" /></a></li>  
</ul>
<div id="fullimage">
 <img class="fullimage" src="http://i.imgur.com/RHhXG.jpg" />
 <img class="fullimage" src="http://i.imgur.com/p1L2e.jpg" />
 <img class="fullimage" src="http://i.imgur.com/NsrI0.jpg" />
 <img class="fullimage" src="http://i.imgur.com/Ww6EU.jpg" /> 
</div>
</div>

CSS

#wrapper { width:520px; overflow:hidden; padding:10px;}
#thumbnail { width:500px; border:2px solid #ddd; padding:10px 5px 5px 5px; overflow:hidden; margin:0 0 10px 0; text-align:center;  }
#thumbnail li {  width:100px; height:100px; border:1px solid #ddd; display:inline-block; margin:0 10px; }
#fullimage { width:500px; border:2px solid #ddd; padding:5px 5px 0 5px; overflow:hidden;}
.fullimage { display:none; }

JavaScript

$('#fullimage img.fullimage:first-child').fadeIn();

$('#fullimage img').on('click', function() {
    $(".fullimage").hide();
    var next = $(this).next();
    if (next.length > 0) {
        next.fadeIn();    
    } else {
        $('#fullimage img:first').fadeIn();
    }
    return false;
});