JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    
    <center>
        <header>
            <img src="Bilder/spegel.jpg" />
        </header>
    </center>
    <center>
        
        <!--Lådan som håller inne allt innehåll-->
        <div class="container">
            <!--Header-->
            <!--Nedan skrivs innehål/text till sidan-->
            <div class="mainBox">
                <center>
                    <img src="Bilder/title.png"  />
                </center>
                <p>
                    <div class="infobox-container">
                        <div id="infobox-1" class="infobox">This is infobox 1! <span class="hide-infobox">[close]</span></div>
                        <div id="infobox-2" class="infobox">This is infobox 2! <span class="hide-infobox">[close]</span></div>
                    </div>
                </p>
                <span class="show-infobox" id="show1">Show infobox 1</span>
                <span class="show-infobox" id="show2">Show infobox 2</span>
             </div>
        </div>
        </center>
    
    </div>

CSS

@charset"utf-8";
 .container {
    height: 800px;
    width: 1000px;
    margin: 0;
}
body {
    padding:0px;
    width:100%;
}
header {
    top: 11px;
    width: 100%;
    padding-bottom: 10px;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}
ol {
    list-style-type: upper-roman;
}
H3 {
    font-size:16px;
    text-shadow: 0px 0px 5px grey;
}
.mainBox {
    background-color: #F0F0F0;
    width: 700px;
    box-shadow: 0px 0px 15px grey;
    top: 310px;
    border-radius: 20px;
    padding-top: 30px;
    padding-right: 50px;
    padding-left: 50px;
}
.container nav ul {
    list-style-type: none;
}
nav {
    width: 720px;
    height:40px;
    background-color: #F0F0F0;
    border-color: grey;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font-family:'PT Sans';
    font-size: 20px;
    margin-bottom:50px;
}
ul {
    padding-right: 20px;
    margin-top: 6px;
}
a {
    color: black;
    text-decoration: none;
    padding: 25px;
}
a:hover {
    color:#00A0C6;
    text-decoration:none;
    cursor:pointer;
}
.imagePack {
    float:left;
    height: 300px;
    width: 200px;
    border-style:solid;
}
img.staff {
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
    /* For IE8 and earlier */
}
img.staff:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
    /* For IE8 and earlier */
}
.infobox-container {
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.infobox {
    background: #fff;
    display: inline-block;
    padding: 2em;
    border: solid 1px #eee;
}
.show-infobox {
    cursor: pointer;
}
.hidden {
    display: none;
}

JavaScript

$(".infobox-container, .infobox").hide();

$(".show-infobox").click(function()
{
var curId = this.id;
if(curId == "show1")
    {
        $(".infobox-container, #infobox-1").fadeIn(100);
    }
if(curId == "show2")
    {
        $(".infobox-container, #infobox-2").fadeIn(100);
    }
});

$(".hide-infobox").click(function()
{  
    $(".infobox-container, .infobox").fadeOut();
});