JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul class="mm-lightbox">
    <li> <a href="https://images.unsplash.com/photo-1429734160945-4f85244d6a5a?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1429734160945-4f85244d6a5a?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1438755582627-221038b62986?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1438755582627-221038b62986?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1438029071396-1e831a7fa6d8?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1438029071396-1e831a7fa6d8?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1437422061949-f6efbde0a471?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1437422061949-f6efbde0a471?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1429734160945-4f85244d6a5a?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1429734160945-4f85244d6a5a?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
    <li> <a href="https://images.unsplash.com/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=400&q=80&w=1200" target="_blank"><img src="https://images.unsplash.com/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=80&q=80&w=80" /></a>

    </li>
</ul>
<hr />
<ul class="mm-lightbox">
    <li> <a...

SCSS

*{
    box-sizing: border-box;
}

hr{
    border: 0;
    border-bottom: 1px solid #ddd;
}

.mm-lightbox{
    padding: 0;
    margin: 35px auto;
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: flex-start;
    & > li{
        display: block;
        text-align: center;
        padding: 5px;
        img{
            max-width: 100%;
            box-shadow: 0 4px 5px -3px rgba(0, 0, 0, 0.25);
            transition: transform 300ms;
            transform: scale(0.9);
        }
        a:hover{
            img{
                transform: scale(1);
            }
        }
    }
}

#mmlb-target{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    & > div{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: stretch;
    }
    .mmlb-fade{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: -1;
    }
    .mmlb-inner{
        margin: 0 auto;
        width: 100%;
        max-width: 900px;
        padding: 15px;
        background-color: #fff;
        position: relative;
        z-index: 0;
        box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    }
    .mmlb-loading{
        display: block;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        z-index: 1;
        &:after{
            content: 'Loading';
            font-family: sans-serif;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 12px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.3);
 ...

JavaScript

/**
 * Lightbox - Grouped
 */

var mmlb = mmlb || {};
mmlb.init = function () {
    mmlb.opened = false;
    mmlb.currentView = null;
    mmlb._data = [];
    $('.mm-lightbox').each(function (i, e) {
        var t = [];
        $(e).children().each(function (n, c) {
            var l = $('a', c)[0];
            if (l) {
                t[n] = l.href;
                $(l).attr('data-imageid', i + '-' + n).addClass('unbound');
            }
        });
        $(e).attr('data-imagegroup', i);
        mmlb._data[i] = t;
    });
    mmlb.bindEvents();
}
mmlb.bindEvents = function () {
    $('a[data-imageid].unbound').each(function (n, el) {
        $(el).removeClass('unbound').click(function (e) {
            e.preventDefault();
            var iid = $(el).data('imageid'),
                group,
                img;
            iid = iid.split('-');
            group = parseInt(iid[0]);
            img = parseInt(iid[1]);
            mmlb.openTarget({
                g: group,
                i: img,
                s: mmlb._data[group][img]
            });
        });
    });
}
mmlb.openTarget = function (img) {
    if (mmlb.opened) {
        return false;
    }
    $('body').append($('<div/>').attr('id', 'mmlb-target').css('display', 'none').html('<div><div class="mmlb-fade" data-mmlbclose></div><div class="mmlb-inner"><span class="mmlb-close" data-mmlbclose></span><div id="mmlb-load"></div><div class="mmlb-controls"><span class="mmlb-prev"></span><span class="mmlb-next"></span></div></div></div>').fadeIn(500, function () {
        mmlb.opened = true;
    }));
    $('[data-mmlbclose]').each(function () {
        $(this).click(function (e) {
            e.preventDefault();
            mmlb.closeTarget();
        });
    });
    $('.mmlb-next').each(function () {
        $(this).click(function (e) {
            e.preventDefault();
            var cv = mmlb.currentView;
            cv.i = cv.i + 1;
            if(typeof mmlb._data[cv.g][cv.i] !== 'undefined'){
	      ...