JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<a id="destination_Weather" href="#destinationWeather">inline</a>

<div style="display: none;">
    <div id="destinationWeather">hello hello hello hello</div>
</div>

CSS

a img {
    float: left;
    max-height: 100px;
    margin: 2px;
}

JavaScript

jQuery(document).ready(function () {
    jQuery("#destination_Weather").fancybox({
        'titlePosition': 'inside',
        'autoScale': true,
        'autoDimensions': true,
        'width': 600,
        'height': 'auto',
        'transitionIn': 'none',
        'transitionOut': 'none',
        // fix inline bug
        'onCleanup': function () {
            var myContent = this.href;
            $(myContent).unwrap();
        }
    });
});