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 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;
}

JavaScript

var firstImg = $('#thumbnail a:first-child').attr("href");
$("#fullimage").hide().html('<img src="' + firstImg + '"/>').fadeIn('slow');

$("#thumbnail a").on('click', function (eve) {
    eve.preventDefault();
    var link = ($(this).attr("href"));
    var content = '<img src="' + link + '"/>';
    $("#fullimage").hide().html(content).fadeIn('slow');

});