JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="projectPopup" style="display: block;">
        <h2 class="projectTitle">I am sorry</h2>
        <p class="projectDescription">It was a nice "Test project", where I did all sorts of (useless) stuff. It was originally intended to create this page's background, but I managed to make a nice game from it. Comes with a *nice* *config format* and reasonable code.<span class="warning">hurr durr</span></p>

        <ul id="links"><li><a href="img/InternetDOSIcon.PNG">i promis</a></li><li><a href="img/athing.png">diwnload</a></li></ul>

        <div class="closeButton" onclick="closeProjectPopup()">Close</div>
    </div>
</body>

CSS

body
{
    background-color: #000;
}

#projectPopup
{
    z-index: 4;
    color: #000;
    background-color: #fff;
    display: none;

    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

#projectPopup p
{
    padding: 10px;
}

#projectPopup .closeButton
{
    background-color: #6700D6;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
}

#projectPopup .closeButton:hover
{
    background-color: #f0f;
}

#projectPopup .projectTitle
{
    color: #fff;

    background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #495298 10px,
        #3D468C 20px
    );

    padding: 1rem;
    padding-right: 5rem;
    margin: 0 0 0.5rem 0;
}