JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" href="http://jacklmoore.com/colorbox/example1/colorbox.css">
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.min.js"></script>
Close colorbox with back button...<br>
<br>

<a href="#colorbox-modal1">Open colorbox</a><br>
<div  id="colorbox-modal1">
    <div>
        <div>
            <b>Modal 1</b><br>
            <br>
            
            Modal 1 content
        </div>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $(window).hashchange(function(){
        var getCb = function() { return location.hash.match(/(#colorbox-.*)/) && RegExp.$1 },
            cb = getCb();
            
        if(cb) {
            $.colorbox({
                href: cb, 
                inline: true, 
                onClosed: function() {
                    if(getCb()) {
                        history.go(-1);
                    }
                }
            });
        } else {
            $.colorbox.close();
        }
    })
});