JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)"><img alt="" src="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" /></a>

<br />
<a class="fancybox-thumb" data-fancybox-type="inline" href="#inline">Inline</a>

<div id="inline" style="display:none;width:500px;">
    <p> <a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
&nbsp; <a href="javascript:$.fancybox.close();">Close</a>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS

.fancybox-thumb img {
    height: 150px
}

JavaScript

var newParagraph = "Cupis ei primum subsannio oculos capillos deponens avarus videret quo alacres ad per animum est se est se ad te. Illos eos in modo cavendum es ego."
$(document).ready(function () {
    $(".fancybox-thumb").fancybox({
        openEffect: 'elastic',
        closeEffect: 'elastic',
        helper: {
            title: {
                type: 'outside'
            },
            thumbs: {
                width: 50,
                height: 50
            }
        }
    });
    $("#add_paragraph").click(function () {
        $("#inline").append("<p>" + newParagraph + "</p>");
        $.fancybox.update();
    });
});