JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<head><title></title>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="gallery">
	<div class="img-area">
		<img data-bind="1" class="current" src="http://placehold.it/400x200">
		<img data-bind="1" class="current" src="http://placehold.it/500x250">
		<img data-bind="2" class="hidden" src="http://placehold.it/300x150">
		<img data-bind="2" class="hidden" src="http://placehold.it/250x125">
		<img data-bind="3" class="hidden" src="http://placehold.it/200x100">
		<img data-bind="3" class="hidden" src="http://placehold.it/350x175">
	</div>
	<ul class="img-selection">
		<li><img data-bind="1" src="http://placehold.it/400x200"></li>
		<li><img data-bind="2" src="http://placehold.it/300x150"></li>
		<li><img data-bind="3" src="http://placehold.it/200x100"></li>
		<li><img data-bind="1" src="http://placehold.it/500x250"></li>
		<li><img data-bind="2" src="http://placehold.it/250x125"></li>
		<li><img data-bind="3" src="http://placehold.it/350x175"></li>
	</ul>
</div>

CSS

.gallery {
	width: 50%;
	margin: auto;
}
.gallery > .img-area {
	width: 100%;
}
.gallery > .img-area > img {
	width: 49.1%;
	transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-webkit-transition: opacity 1s linear;
}
.gallery > .img-selection {
	width: 100%;
	padding: 0;
	margin: 0;
}
.gallery > .img-selection > li {
	display: inline;
	list-style: none;
}
.gallery > .img-selection > li > img {
	width: 15.2%;
}

JavaScript

var imgIndex = 1;
$(document).ready( function() {
	$(".hidden").hide();
	$(".hidden").css({ opacity:0 });
	$(".gallery .img-selection li img").click( function() {
		$(".gallery .img-area .current").css({ opacity:0 });
		imgIndex = $(this).data("bind");
		console.log(imgIndex);
		$(".gallery .img-area .current:eq(0)").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
		function() {
			console.log("transition end");
			$(".gallery .img-area .current").hide();
			$(".gallery .img-area .current").removeClass("current");
			$(".gallery .img-area img[data-bind=" +imgIndex+ "]").show();
			$(".gallery .img-area img[data-bind=" +imgIndex+ "]").css({ opacity:1 });
			$(".gallery .img-area img[data-bind=" +imgIndex+ "]").addClass("current");
		});
	});
});