JSFiddle - React, Tailwind, and code Playground

by PHI

HTML

<div class="popups-cont">
        <div class="popups-cont__overlay"></div>
        <div class="popup">
            <div class="popup__pieces"></div>
            <div class="popup__content">
                <div class="popup__close"></div>
                <h3 class="popup__heading">1</h3>
                <p class="popup__text">1111111</p>
            </div>
        </div>
    </div>
    <div class="popups-cont">
        <div class="popups-cont__overlay"></div>
        <div class="popup">
            <div class="popup__pieces"></div>
            <div class="popup__content">
                <div class="popup__close"></div>
                <h3 class="popup__heading">2</h3>
                <p class="popup__text">2222222</p>
            </div>
        </div>
    </div>
        <img id="c1" class="client col1 row1" src="http://bower.io/img/bower-logo.png" alt="">
    <img id="c2" class="client col2 row1" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" alt="">

CSS

*,
    *:before,
    *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body {
        overflow: hidden;
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        background-color: #fafafa;
    }
    .popups-cont {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        z-index: -10;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        -webkit-perspective: 1000px;
        perspective: 1000px;
        pointer-events: none;
        -webkit-transition: z-index 0s 0.8s;
        transition: z-index 0s 0.8s;
    }
    .popups-cont.s--popup-active {
        z-index: 1000;
        pointer-events: auto;
        -webkit-transition: z-index 0s 0s;
        transition: z-index 0s 0s;
    }
    .popups-cont__overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }
    .popups-cont.s--popup-active .popups-cont__overlay {
        opacity: 1;
        -webkit-transition: opacity 0.35s 0.35s;
        transition: opacity 0.35s 0.35s;
    }
    .popup {
        z-index: 2;
        position: relative;
        width: 500px;
        height: 500px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .popup .popup__piece:nth-child(1) {
        height: 20.66667%;
        width: 18.66667%;
    }
    .popup .popup__piece:nth-child(1) .popup__piece-inner:nth-child(1) {
        -webkit-transform: translate3d(22vw, 13vh, -496px) rotateX(472deg)...

JavaScript

var numOfPieces = 6*6;
    var frag = document.createDocumentFragment();
    function insertInnerPieces($el, innerPieces) {
        for (var i = 0; i < innerPieces; i++) {
            var $inner = document.createElement('div');
            $inner.classList.add('popup__piece-inner');
            $el.appendChild($inner);
        }
    };
    for (var i = 1; i <= numOfPieces; i++) {
        var $piece = document.createElement('div');
        $piece.classList.add('popup__piece');

        insertInnerPieces($piece, 3);
        frag.appendChild($piece);
    }
    document.querySelector('.popup__pieces').appendChild(frag);
    var $popupsCont = document.querySelector('.popups-cont');
    var $popup = document.querySelector('.popup');
    var popupAT = 900;

    document.querySelector('#c1').addEventListener('click', function() {
        $popupsCont.classList.add('s--popup-active');
        $popup.classList.add('s--active');
    });
    document.querySelector('#c2').addEventListener('click', function() {
        $popupsCont.classList.add('s--popup-active');
        $popup.classList.add('s--active');
    });
    document.querySelector('.popup__close').addEventListener('click', closeHandler);
    document.querySelector('.popups-cont__overlay').addEventListener('click', closeHandler);