JSFiddle - React, Tailwind, and code Playground

HTML

<section class="gallery">
  <h1 class='desc__photo'>Мечтай</h1>
  <p class="gallery__photo-full">
    <img class="full-photo" src="https://avatars.mds.yandex.net/get-pdb/1515217/9644a42e-58f7-45d7-af28-9fe16f5eccf6/s600" width="550" height="367" alt="Фото большое">
  </p>
  <p class="gallery__photo-previews">
    <button class="gallery__photo-preview" type="button">
      <img src="https://avatars.mds.yandex.net/get-pdb/1515217/9644a42e-58f7-45d7-af28-9fe16f5eccf6/s600" alt="">
    </button>
    <button class="gallery__photo-preview" type="button">
      <img src="https://avatars.mds.yandex.net/get-pdb/1684402/a018cc3f-03c6-4028-ad15-dea2e1189751/s600" alt="">
    </button>
    <button class="gallery__photo-preview" type="button">
      <img src="https://avatars.mds.yandex.net/get-pdb/1520606/453de1f7-4f74-4f8d-ac95-62e07420806f/s600" alt="">
    </button>
    <button class="gallery__photo-preview" type="button">
      <img src="https://avatars.mds.yandex.net/get-pdb/1511346/49db2772-2fa6-4c33-b584-faac69d1325f/s600" alt="">
    </button>
    <button class="gallery__photo-preview" type="button">
      <img src="https://avatars.mds.yandex.net/get-pdb/1515151/708d9167-c29e-4b52-aa05-19b601252130/s600" alt="">
    </button>
  </p>
</section>

CSS

.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery__photo-full {
  margin-bottom: 12px;
}

.gallery__photo-full img {
  display: block;
}

.gallery__photo-previews {
  display: flex;
  list-style-type: none;
  margin: 0;
  width: 550px;
  padding: 0;
  justify-content: space-between;
}

.gallery__photo-preview {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.gallery__photo-preview:hover,
.gallery__photo-preview:focus {
  opacity: 0.7;
}

.gallery__photo-preview img {
  display: block;
  object-fit: cover;
  width: 100px;
  height: 100px;
}

.gallery__photo-preview--active img {
  outline: 5px solid red;
  outline-offset: -5px;
}

.pattern {
  background: url("gallery/leaves-pattern.png") 0 0 repeat;
}

JavaScript

const arr = [
  {desc: 'Мечтай'},
  {desc: 'Мост'},
  {desc: 'Кексики'},
  {desc: 'Бабочки'},
  {desc: 'Милый котик'}
];

let thumbnails = document.querySelectorAll('.gallery__photo-preview>img');
let fullPhoto = document.querySelector('.full-photo');
let descPhoto = document.querySelector('.desc__photo');

function addThumbnailClickHandler(thumbnail, arr) {
  thumbnail.addEventListener('click', function () {
    fullPhoto.src = thumbnail.getAttribute('src');
    descPhoto.textContent = arr.desc;
  });
};

for (let i = 0; i < thumbnails.length; i++) {
  addThumbnailClickHandler(thumbnails[i], arr[i]);
}