JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<ul id="thumbnail">
  <li><img class="thumbnail" src="http://i.imgur.com/RHhXG.jpg" width="100" height="100" /></li>
  <li><img class="thumbnail" src="http://i.imgur.com/p1L2e.jpg" width="100" height="100" /></li>
  <li><img class="thumbnail" src="http://i.imgur.com/NsrI0.jpg" width="100" height="100" /></li>
  <li><img class="thumbnail" src="http://i.imgur.com/Ww6EU.jpg" width="100" height="100" /></li>  
</ul>
<div id="fullimage">
    <img class="fullimage" src="http://i.imgur.com/RHhXG.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 { width:300px; }
// change the .fullimage so it looks pretty

JavaScript

$(".thumbnail").on('click', function() {
    $(".fullimage").attr("src", $(this).attr("src"));
});