JSFiddle - React, Tailwind, and code Playground

by Sergey Gornostaev

HTML

<div class="gallery">
  <div id="image">
    <img src="https://vk.com/sticker/1-128-256">
  </div>
  <div class="previews">
    <img src="https://vk.com/sticker/1-128-64" data-url="https://vk.com/sticker/1-128-256">
    <img src="https://vk.com/sticker/1-121-64" data-url="https://vk.com/sticker/1-121-256">
    <img src="https://vk.com/sticker/1-115-64" data-url="https://vk.com/sticker/1-115-256">
    <img src="https://vk.com/sticker/1-103-64" data-url="https://vk.com/sticker/1-103-256">
  </div>
</div>

CSS

.previews img {
  margin: 5px;
  padding: 3px;
  border: 1px solid black;
}

.gallery > div {
  display: block;
  text-align: center;
}

JavaScript

var image = document.querySelector('#image img');
document.querySelectorAll('.previews img').forEach(function(element) {
	element.addEventListener('click', function(event) {
  	image.src = this.dataset.url;
  });
});