JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css">
<div style="display: none;">
    <div id="gallery">
        This is gallery...
    </div>
</div>

<input type="button" id="show" value="Show Colorbox" />

CSS

#protect {
    background:url(http://img.ehowcdn.com/other-people/ehow/images/a06/q3/8p/add-transparent-copyright-photograph-180x180.jpg) bottom right no-repeat; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0;
    left:0;
}

JavaScript

$("#show").click(function(){

    $.colorbox({
        width: "300px",
        inline: true,
        href: "#gallery",
        height: "60%",
        overlayClose: true,
        onComplete:function(){ 
            $('#cboxLoadedContent').append("<div id='protect'></div>"); 
        }
    });

});