JSFiddle - React, Tailwind, and code Playground
HTML
<div class="item">
<img src="http://lorempixel.com/400/200" alt="" class="active">
<img src="http://lorempixel.com/400/201" alt="">
<img src="http://lorempixel.com/400/202" alt="">
</div>
<div class="preview">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
SCSS
img {
display: none;
&.active {
display: block;
}
}
JavaScript
$('a').click(function(e) {
e.preventDefault();
var index = $(this).index();
$('.item').find('.active').removeClass('active');
$('img').eq(index).addClass('active')
})