JSFiddle - React, Tailwind, and code Playground

HTML

<div class="files">
  <div class="file">
    <a class="file-link" href="https://phpclub.tech/1152267/15206021256410.png">
      <img class="preview" src="https://phpclub.tech/1152267/thumb/15206021256410s.jpg" alt="500x500">
    </a>
  </div>
  
  <div class="file">
      <a class="file-link" href="https://phpclub.tech/1152267/15206021256411.jpg">
        <img class="preview" src="https://phpclub.tech/1152267/thumb/15206021256411s.jpg" alt="500x500">
      </a>
  </div>
</div>

<div id="lightbox"></div>

CSS

.file {display: inline-block}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    border: dashed 2px black;
    box-shadow: rgb(0, 0, 0) 0px 4px 30px;
    border-radius: 2px;
    max-width: 66%;
    max-height: 66%;
}

#lightbox img, #lightbox video {
    display: block;
    width: 100%;
    height: 100%;
}

JavaScript

var lightbox = $('#lightbox');
    var a = $('.file-link');

    $(window).click(function(e) {
        var fullsize = $('.fullsize');

        if ($(a).has(e.target).length == 0 && !$(e.target).is('.file-link')) {
            if (!$(e.target).is('.fullsize')) {
                hideLightbox(lightbox, fullsize);
            }
        } else {
            fullsize.remove();

            var src = $(e.target).closest(a).attr('href');
            var ext = getExtenstion(src);

            switch (ext) {
                case 'jpg': case 'png': case 'gif':
                    var content = $('<img/>', {class: 'fullsize', src: src});

                    $(content).on('load', function() {
                        centerContent(content, lightbox);
                    });

                    break;

                case 'mp4': case 'webm':
                    var content = $('<video/>', {class: 'fullsize', src: src, controls: 'controls'});
                    
                    $(content)[0].oncanplay = function() {
                        centerContent(content, lightbox);
                    };

                    break;

                default:
                    return;
            }

            e.preventDefault();

            lightbox.append(content);
            lightbox.show();
        }
    });
    
    function getExtenstion(src) {
        return src.split('.').pop().toLowerCase();
    }

    function centerContent(content, lightbox) {
        var width = $(window).width();
        var cWidth = $(content).width();

        var height = $(window).height();
        var cHeight = $(content).height();

        var top = (height - cHeight) / 2;
        var left = (width - cWidth) / 2;

        lightbox.css('top', top);
        lightbox.css('left', left);
    }

    function hideLightbox(lightbox, fullsize) {
        lightbox.hide();
        fullsize.remove();
    }