JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="grid-reveal">
    <div class="grid-cover">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="grid-thumbs">
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
        <div style="background-image: url(http://dummyimage.com/400x400/ececec/353535.png);"> <span></span>

        </div>
    </div>
</div>
<p>test</p>

SCSS

/* CORE */
 html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: sans-serif;
}
body {
    margin: 20px;
    overflow-x: hidden;
}
img {
    max-width: 100%;
}
* {
    box-sizing: border-box;
}
/* GRID */
 .grid-reveal {
    position: relative;
    margin: 40px auto;
    .grid-cover {
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px;
        display: flex;
        flex-wrap: wrap;
        justify-content: stretch;
        align-items: stretch;
        z-index: 2;
        //pointer-events: none;
        & > div {
            perspective: 50vw;
            width: 25%;
            padding-top: 25%;
            position: relative;
            margin-right: -1px;
            margin-bottom: -1px;
            z-index: 0;
            overflow: hidden;
            &:after{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: #fff;
                transition: transform 800ms, opacity 500ms;
                transform: rotateY(-180deg);
                transform-origin: top left;
                opacity: 0;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }
            &:nth-child(2n):after{
                transform-origin: bottom right;
            }
            &:nth-child(3n):after{
                transform: rotateX(90deg);
            }
            $i: 0;
            @while ($i <= 10){
                &:nth-child(#{(10 - $i)}):after{
                    transition-delay: #{(100 * $i)}ms;
                }
                $i: $i + 1;
            }
        }
        &:hover{
            & > div{
                &:after{
                    transform: rotateX(0deg);
                    opacity: 1;
                    transition: transform 800ms, opacity 800ms;
               ...

JavaScript

/**
 * Grid reveal
 */