JSFiddle - React, Tailwind, and code Playground

by LOOnny

HTML

<div class="box">
  <div class="box__fullscreen"></div>
  <div class="box__items">
    <div class="box__item bc_lightpink" data-zoom="0"></div>

    <div class="box__item bc_lightsalmon" data-zoom="0"></div>

    <div class="box__item bc_lightseagreen" data-zoom="0"></div>

    <div class="box__item bc_lightskyblue" data-zoom="0"></div>

    <div class="box__item bc_lightslategray" data-zoom="0"></div>

  </div>
</div>

CSS

.box__fullscreen {
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.box__wrapper-item {
}

.box__item {
  display: inline-block;
  width: 150px;
  height: 150px;
  transition: 0.3s width, 0.3s height;
}

.bc_lightpink {
  background-color: lightpink;
}

.bc_lightsalmon {
  background-color: lightsalmon;
}

.bc_lightseagreen {
  background-color: lightseagreen;
}

.bc_lightskyblue {
  background-color: lightskyblue;
}

.bc_lightslategray {
  background-color: lightslategray;
}

JavaScript

$('.box__item').click(function(e) {
  $('.box__fullscreen')
    .html(
      $(this)
        .clone()
        .animate({
          width: '400px',
          height: '400px'
        }, 300)
    )
    .css('display', 'flex')
})

$('.box__fullscreen').click(function(e) {
  $(this).css('display', 'none');
})