JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.shadowbox-js.com/build/shadowbox.js"></script>
<link rel="stylesheet" href="http://www.shadowbox-js.com/build/shadowbox.css">
<div id="gallery">
    <a rel="shadowbox[gallery];title=The Unknown;width=300;height=300" href="http://placecage.com/c/300/300">
        <img src="http://placecage.com/c/300/300" alt="%NAME%"/>
        <p class="caption">The Unknown </p>
    </a>
    <a rel="shadowbox[gallery];title=D;width=300;height=300" href="http://placecage.com/g/300/300">
        <img src="http://placecage.com/g/300/300" alt="%NAME%"/>
        <p class="caption">D </p>
    </a>
    <a rel="shadowbox[gallery];title=Underneath;width=300;height=300" href="http://placecage.com/300/300">
        <img src="http://placecage.com/300/300" alt="%NAME%"/>
        <p class="caption">U<p>the M</p></p>
    </a>
</div>

CSS

#sb-title-inner, #sb-info-inner, #sb-loading-inner, div.sb-message {
    font-family:"HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight:200;
    color:#fff;
}

#sb-wrapper {
    border: thin solid black;
    background-color: black;
}

JavaScript

Shadowbox.init();