JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thumbs"></div>
<div id="screen" style="display: none;"><div id="imgs"><div></div></div>

CSS

* {
    padding: 0;
    margin: 0;
}
#thumbs div {
    margin: 5px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
#thumbs div::after {
    content: attr(data-title);
    position: absolute;
    top: 130px;
    left: 0; right: 0; bottom: 5px;
    z-index: 1;
    background: rgba(0,42,167,0.6);
    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 11px;
    padding: 5px 10px;
    transition: 1s;
    line-height: 11px;
}
#thumbs div:hover::after {
    content: attr(data-title);
    top: 0;
    line-height: 150px;
    font-size: 30px;
}
#screen {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    overflow: hidden;
    cursor: pointer;
}
#imgs {
    width: 90vw;
    left: calc(5vw - 10px);
    height: 90vh;
    top: calc(5vh - 10px);
    background: white;
    border-radius: 10px;
    position: absolute;
    padding: 10px;
    cursor: auto;
}
#imgs div {
    overflow: auto;
    height: 100%;
    width: 100%;
    text-align: center;
}
#imgs div img {
    margin: 5px;
    vertical-align: top;
    line-height: 0;
}

JavaScript

var works = [
    {title: "work1", thumb: "http://placehold.it/200x150", imgs: ["http://placehold.it/400x400/ff0000", "http://placehold.it/400x400/00ff00", "http://placehold.it/400x400/0000ff"]},
    {title: "work1rfe", thumb: "http://placehold.it/200x150"},
    {title: "work1r43ew", thumb: "http://placehold.it/200x150"},
    {title: "work1rew", thumb: "http://placehold.it/200x150"},
    {title: "work13dw", thumb: "http://placehold.it/200x150"},
    {title: "work112", thumb: "http://placehold.it/200x150"},
    {title: "work1", thumb: "http://placehold.it/200x150"},
    {title: "work1", thumb: "http://placehold.it/200x150"},
    {title: "work1", thumb: "http://placehold.it/200x150"},
    {title: "work1e", thumb: "http://placehold.it/200x150"}
];

var $screen = document.querySelector("#screen");
var $imgs = document.querySelector("#imgs div");
var $thumbs = document.querySelector("#thumbs");
works.forEach(function(work)
              {
                  var $thumb = document.createElement("div");
                  var $thumbImg = document.createElement("img");
                  $thumbImg.src = work.thumb;
                  $thumb.onclick = function()
                  {
                      $imgs.innerHTML = "";
                      work.imgs.forEach(function(img)
                                        {
                                            var $img = document.createElement("img");
                                            $img.src = img;
                                            $imgs.appendChild($img);
                                        });
                      $screen.style.display = "block";
                      document.body.style.overflow = "hidden";
                      $screen.onclick = function(e)
                      {
                          if(e.toElement == $screen)
                          {
                              $screen.style.display = "none";
                              document.body.style.overflow = "auto";
     ...