JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fullimg none">
  <div class="fullimgbox"></div>
</div>

<div class="room">
<div class="activeimgbox">
  <img src="http://alfakrai.ru/i/mstudio1.jpg" alt="" class="activeimg">
</div>
  <div class="littlebox">
  <div class="minimgbox">
    <img src="http://alfakrai.ru/i/mstudio2.jpg" alt="" class="minimg"></div>
     <div class="minimgbox">
    <img src="http://alfakrai.ru/i/mstudio3.jpg" alt="" class="minimg"></div>
     <div class="minimgbox">
    <img src="http://alfakrai.ru/i/mstudio4.jpg" alt="" class="minimg"></div>
     <div class="minimgbox">
    <img src="http://alfakrai.ru/i/mstudio5.jpg" alt="" class="minimg"></div>
  </div>
</div>

CSS

.none {
  display: none;
}


.littlebox img {
  width: 100%;
}

.fullimg {
    height: 100%;
    width: 100%;
    background: rgba(51, 51, 51, 0.75);
    position: absolute;
    cursor: pointer;
}

.fullimgbox img{
  width: 80%;
  max-width: 1200px;
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

.block {
  display: block;
}

.activeimg {
  float:left;
  margin-right: 10px;
}
.littlebox {
  float:left;
  width: 110px;
}

img{
  cursor: pointer;
}

JavaScript

$(document).on('click', '.activeimg', function () {
$('.fullimg').fadeIn();
$(this).clone().appendTo('.fullimgbox');
});

$(document).on('click', '.fullimg', function () {
$('.fullimg').fadeOut();
$('.fullimgbox').empty()
});

$(document).on('click', '.minimg', function () {
$('.activeimg').removeClass('activeimg').addClass('minimg').prependTo($(this).parent());
$(this).appendTo('.activeimgbox').addClass('activeimg').removeClass('minimg');
});