JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header"></div>
    <div class="thumbnail">
        <img class="singapore" id="0" src="https://i.imgur.com/iX5mF7Gb.jpg">
        <img class="singapore" id="1" src="https://i.imgur.com/RsPhVw6b.jpg">
        <img class="singapore" id="2" src="https://i.imgur.com/PxVQmUxb.jpg">
    </div>
    <!-- Eigenes Javascript einbinden -->
</body>

CSS

.header {
     height: 9.5em;
     width: 101%;
     /* Postion */
     position: relative;
     text-align: center;
     margin: -1.7em 0 0 2px;
     z-index: 0;
     /* Farbe und Schrift */
     background-color: #CFCFCF;
     font-family:'Open Sans', sans-serif;
     color: #4F4F4F;
 }
 .header h1 {
     font-size: 40px;
     padding: 0.3em 0 0 0;
 }
 .thumbnail img {
     display: inline;
     height: 150px;
     width: 150px;
     border-radius: 150px;
     margin: 10px 20px 10px 20px;
 }
 body {
     background-color: #4F4F4F;
     position:fixed;
     height: 100%;
     width: 100%;
     border: none;
     margin: -2px;
     z-index: 0;
 }
 html {
     height: 100%;
     width: 100%;
 }
 body, html {
     overflow-x: auto;
     overflow-y: auto;
 }
 #lightbox {
     position: fixed;
     top:0;
     left:0;
     height:100%;
     width:100%;
     background-color: black;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     z-index:900;
 }
 #lightboxText {
     position: absolute;
     bottom: 0px;
     width:100%;
     height: 30px;
     background-color: rgba(0, 0, 0, 0.4);
     font-family:'Open Sans', sans-serif;
     color: #FFFFFF;
     text-align: center;
     padding-top: 10px;
     z-index:950;
 }
 .lightboxBar {
     background-color: rgba(200, 200, 200, 0.1);
     height: 100%;
     width: 60px;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1000;
 }
 #rightBar {
     left: auto;
     right: 0;
 }

JavaScript

$(document).ready(function () {
    var currentID = 0;
    var singapore0 = {
        link: "url(https://i.imgur.com/iX5mF7G.jpg)",
        colorBackground: "#FFFFFF",
        info: "Small soldiers"
    };
    var singapore1 = {
        link: "url(https://i.imgur.com/RsPhVw6.jpg)",
        colorBackground: "#FFFFFF",
        info: "Corgi"
    };
    var singapore2 = {
        link: "url(https://i.imgur.com/PxVQmUx.jpg)",
        colorBackground: "#4F4F4F",
        info: "Young lady"
    };
    var singaporeArray = [singapore0, singapore1, singapore2];
    var activeArray = singaporeArray;
    var openThumbnail = function (array, id) {

        $('<div id="lightbox"><div id="leftBar" class="lightboxBar"></div><div id="rightBar" class="lightboxBar"></div><div id="lightboxText">Information</div></div').insertAfter('.header');
        $('#lightbox').css("background-image", array[id].link);
        $('#lightbox').css("background-color", array[id].colorBackground);
    };
    $('.singapore').click(function (event) {
        currentID = event.target.id;
        openThumbnail(singaporeArray, currentID);
        $(document).on('click', '#lightbox', function () {
            $(this).remove();
        });
    });

    $(document).on('mouseover', '#lightboxText', function (event) {
        event.stopPropagation();
        $('#lightboxText').css("height", "200px");
        $('#lightboxText').css("background-color", "rgba(0,0,0,0.8)");
        $('#lightboxText').append('<p id="infoComplete">' + singaporeArray[currentID].info + '</p>');
    });
    $(document).on('mouseout', '#lightboxText', function () {
        $('#lightboxText').css("height", "30px");
        $('#lightboxText').css("background-color", "rgba(0,0,0,0.4)");
        $('#infoComplete').remove();
    });
    var dimm = function (element, farbe) {
        $(element).css("background-color", farbe);
    };
    $(document).on('mouseover', '#rightBar', function () {
        dimm('#rightBar', "rgba(200,200,200,1)");
   ...