JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<a class="btn btn-primary openbox more" href="#">Open ColorBox</a>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');



#mystuff {
    background: rgb(60,60,60);
    color: white;
    padding: 10px 10px 2px 10px;
}

JavaScript

var colorBoxHtml = '<div id=mystuff><h1>My ColorBox Modal</h1><p><a href="#" class="btn more">Add more content!</a></p></div>';
var colorBoxHtmlExtended = '<p>More content.</p>';

$('a.openbox').on('click', function() {
        
    $.colorbox({ html: colorBoxHtml })
});

$('body').on('click', 'a.more', function() {
            
    $('#mystuff').append(colorBoxHtmlExtended);
    // HERE IS THE IMPORTANT PART....
    $.colorbox.resize();
})