JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css">
<div id="fb-root"></div>
<script>
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<div class="demo">
    <ul id="comment-box">
        <li data-responsive="http://sachinchoolur.github.io/lightGallery/static/img/1-375.jpg 375, http://sachinchoolur.github.io/lightGallery/static/img/1-480.jpg 480, http://sachinchoolur.github.io/lightGallery/static/img/1.jpg 800" data-src="http://sachinchoolur.github.io/lightGallery/static/img/1-1600.jpg" data-sub-html='<div class="fb-comments" data-href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html#lg=1&slide=0" data-width="400" data-numposts="5"></div>'> <a href="">
          <img class="img-responsive" src="http://sachinchoolur.github.io/lightGallery/static/img/thumb-1.jpg">
        </a>

        </li>
        <li...

CSS

.demo ul {
    padding-left:0
}
.demo li {
    list-style: outside none none;
    width: 200px;
    float: left;
    display: block;
    overflow: hidden;
    margin-right:10px;
    margin-bottom: 10px;
}
.demo li img {
    height: auto;
    max-width:100%
}
.lg-landscape .lg-outer.fb-comments .lg-img-wrap {
    padding-right: 400px !important;
}
.lg-landscape .lg-outer.fb-comments .fb-comments {
    height: 100%;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 420px;
    z-index: 99999;
    background: #fff url("../img/loading.gif") no-repeat scroll center center;
}
.lg-landscape .lg-outer.fb-comments .fb-comments.fb_iframe_widget {
    background-image: none;
}
.lg-landscape .lg-outer.fb-comments .fb-comments.fb_iframe_widget.fb_iframe_widget_loader {
    background: #fff url("../img/loading.gif") no-repeat scroll center center;
}
.lg-landscape .lg-outer.fb-comments .lg-toolbar {
    right: 420px;
    width: auto;
}
.lg-landscape .lg-outer.fb-comments .lg-actions .lg-next {
    right: 420px;
}
.lg-landscape .lg-outer.fb-comments .lg-item {
    background-image: none;
}
.lg-landscape .lg-outer.fb-comments .lg-item.lg-complete .lg-img-wrap {
    background-image: none;
}
.lg-landscape .lg-outer.fb-comments .lg-img-wrap {
    background: url(../img/loading.gif) no-repeat scroll center center transparent;
}
.lg-landscape .lg-outer.fb-comments .lg-sub-html {
    padding: 0;
    position: static;
}
.lg-portrait .lg-outer.fb-comments .lg-img-wrap {
    padding-bottom: 400px !important;
}
.lg-portrait .lg-outer.fb-comments .fb-comments {
    height: 420px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    background: #fff url("../img/loading.gif") no-repeat scroll center center;
}
.lg-portrait .lg-outer.fb-comments .fb-comments.fb_iframe_widget {
    background-image: none;
}
.lg-portrait .lg-outer.fb-comments...

JavaScript

var $commentBox = $('#comment-box');
$commentBox.lightGallery({
    appendSubHtmlTo: '.lg-item',
    addClass: 'fb-comments',
    mode: 'lg-fade',
    download: false,
    enableDrag: false,
    enableSwipe: false
});

var manageFbCommentbox = function () {
    if ($(window).width() > $(window).height()) {
        $('body').removeClass('lg-portrait').addClass('lg-landscape');
        $('.lg-actions .lg-icon').css('top', '50%');
    } else {
        $('body').removeClass('lg-landscape').addClass('lg-portrait');
        $('.lg-actions .lg-icon').css('top', $('.lg-img-wrap').height() / 2 + 'px');
    }
};

$commentBox.on('onAfterOpen.lg', function () {
    manageFbCommentbox();
});

$(window).on('resize', function () {
    manageFbCommentbox();
});

$commentBox.on('onAfterSlide.lg', function (event, prevIndex, index) {
    if (!$('.lg-outer .lg-item').eq(index).attr('data-fb')) {
        try {
            $('.lg-outer .lg-item').eq(index).attr('data-fb', 'loaded');
            FB.XFBML.parse();
        } catch (err) {
            $(window).on('fbAsyncInit', function () {
                $('.lg-outer .lg-item').eq(index).attr('data-fb', 'loaded');
                FB.XFBML.parse();
            });
        }
    }
});