JSFiddle - React, Tailwind, and code Playground

by beefchimi

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3">
<section><!-- Gallery 1 |begin| -->

    <!-- Inline post-1 -->
    <article>
        <a href="post-1" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &gt; post-2 &gt; post-3</a>
        <div id="post-1">Inline content for #post-1. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-2 -->
    <article>
        <a href="post-2" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &gt; post-3</a>
        <div id="post-2">Inline content for #post-2. Group is Gallery 1.</div>
    </article>

    <!-- Inline post-3 -->
    <article>
        <a href="post-3" class="inlinepopup" rel="gallery1">Gallery 1: post-1 &lt; post-2 &lt; post-3</a>
        <div id="post-3">Inline content for #post-3. Group is Gallery 1.</div>
    </article>

</section><!-- Gallery 1 |end| -->

<section><!-- Gallery 2 |begin| -->

    <!-- Inline post-4 -->
    <article>
        <a href="post-4" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &gt; post-5</a>
        <div id="post-4">Inline content for #post-4. Group is Gallery 2.</div>
    </article>

    <!-- Inline post-5 -->
    <article>
        <a href="post-5" class="inlinepopup" rel="gallery2">Gallery 2: post-4 &lt; post-5</a>
        <div id="post-2">Inline content for #post-5. Group is Gallery 2.</div>
    </article>

</section><!-- Gallery 2 |end| -->

CSS

section {
    padding: 10px;
}
article {
    margin-bottom: 6px;
}

JavaScript

$("a.inlinepopup").fancybox({
    'width'           : '75%',
    'height'          : '75%',
    'autoScale'       : false,
    'type'            : 'iframe'
});