JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="main-scene">
    <div id="scene"></div>
    <div id="window" class="scene__window">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="scene__wall"></div>
    <div class="scene__shadow">
        <div class="scene__wall--shadow"></div>
        <div class="scene__window scene__window--shadow">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>
<p>In ut quam vitae odio lacinia tincidunt. Etiam rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed libero. Duis vel nibh at velit scelerisque suscipit.</p>

SCSS

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
}

#main-scene{
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #999;
    overflow: hidden;
    perspective: 100vw;
    transition: background-color 1s;
    #scene{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 79.9vh;
        background-color: #fff;
        transition: background-color 1s;
    }
    .scene__window{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 80vh;
        overflow: hidden;
        & > span{
            position: relative;
            display: block;
            width: 25%;
            height: 50%;
            float: left;
            border: 1vh solid #444;
            transition: border 1s;
            &:nth-last-child(1n+9){
                border-top: 0;
            }
            &:nth-child(4n+1){
                border-left: 0;
            }
            &:nth-child(4n){
                border-right: 0;
            }
        }
        &:not(.scene__window--shadow) > span{
            &:after{
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(#fff, 0.2);
                box-shadow: 0 0 1.5vh 0.3vh rgba(#fff, 0.5);
                transition: box-shadow 1s, background-color 1s;
            }
        }
    }
    .scene__wall{
        background-color: #383838;
        position: absolute;
        top: 79.9vh;
        left: 0;
        right: 0;
        height: 10.1vh;
        border-top: 1vh solid #2c2c2c;
        border-bottom: 2vh solid #2c2c2c;
        transition: background-color 1s, border 1s;
    }
    .scene__shadow{
        position: absolute;
        top: 90vh;
        left: 0;
        right: 0;
        transform-origin: bottom center;
        transform: scale(1.25) rotate3d(2,...

JavaScript

/**
 * Window scene
 */
var s = document.getElementById('main-scene');
setInterval(function(){
    if(s.className.match(/\bscene--dark\b/i)){
        s.className = s.className.replace(/\s?\bscene--dark\b/i, '');
    }else{
        var c = s.className.replace(/\s+$/, '') + ' scene--dark';
        s.className = c.replace(/^\s+/, '');
    }
}, 4000);