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 (Vanilla JS)
 */

var mmlb = {
  opened: false,
  currentView: null,
  _data: []
}

mmlb.init = function(selector) {
  var lightboxGroups = document.querySelectorAll(selector);
  Array.prototype.forEach.call(lightboxGroups, function(group, i) {
    var links = [];
    Array.prototype.forEach.call(group.querySelectorAll('li'), function(single, n) {
      var link = single.querySelector('a');
      if (link) {
        if (!link.className.match('\bbound\b')) {
          links.push(link.href);
          link.setAttribute('data-imageid', [i, n].join('-'));
          link.className = (link.className + ' unbound').trim();
        }
      }
    });
    group.setAttribute('data-imagegroup', i);
    mmlb._data.push(links);
  });
  mmlb.bindEvents();
}

mmlb.bindEvents = function() {
  var links = document.querySelectorAll('a[data-imageid].unbound');
  Array.prototype.forEach.call(links, function(link, i) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      var iid = link.getAttribute('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;
  }
  
  var renderDOM = {
    tag: 'div',
    attr: {
      'id': 'mmlb-target'
    },
    css: {
      display: 'none'
    },
    nodes: [
      {
        tag: 'div',
        nodes: [
          {
            tag: 'div',
            attr: {
              'class': 'mmlb-fade',
              'data-mmlbclose': true
            },
            events: [
              {
                type: 'click',
                listener: function(){
                  mmlb.closeTarget();
                }
              }
            ]
          },
          {
            tag: 'div',
            attr: {
              'class':...