JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<div id="content">
        <div id="up-left">
            <div class="box snap white">
                <h1>ONE</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box snap black">
                <h1>TWO</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box snap white">
                <h1>THREE</h1>   
                <a class="more" href="" title=""></a>
            </div>
            <div class="box snap black">
                <h1>FOUR</h1>   
                <a class="more" href="" title=""></a>
            </div>
            <div class="box snap white">
                <h1>FIVE</h1>   
                <a class="more" href="" title=""></a>
            </div>
            <div class="box snap black six">
                <h1>SIX</h1>   
                <a class="more" href="" title=""></a>
            </div>
        </div>
        <div id="down-right">
            <div class="box black">
                <h1>ONE</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box white">
                <h1>TWO</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box black">
                <h1>THREE</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box white">
                <h1>FOUR</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box black">
                <h1>FIVE</h1>
                <a class="more" href="" title=""></a>
            </div>
            <div class="box white">
                <h1>SIX</h1>
                <a class="more" href="" title=""></a>
            </div>
        </div>
    </div>
<script>
function crisscross() {
$('up-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY +...

JavaScript

Ci8qISBqUXVlcnkgdjEuOS4wIHwgKGMpIDIwMDUsIDIwMTIgalF1ZXJ5IEZvdW5kYXRpb24sIEluYy4gfCBqcXVlcnkub3JnL2xpY2Vuc2UgKi8oZnVuY3Rpb24oZSx0KXsidXNlIHN0cmljdCI7ZnVuY3Rpb24gbihlKXt2YXIgdD1lLmxlbmd0aCxuPXN0LnR5cGUoZSk7cmV0dXJuIHN0LmlzV2luZG93KGUpPyExOjE9PT1lLm5vZGVUeXBlJiZ0PyEwOiJhcnJheSI9PT1ufHwiZnVuY3Rpb24iIT09biYmKDA9PT10fHwibnVtYmVyIj09dHlwZW9mIHQmJnQ+MCYmdC0xIGluIGUpfWZ1bmN0aW9uIHIoZSl7dmFyIHQ9VHRbZV09e307cmV0dXJuIHN0LmVhY2goZS5tYXRjaChsdCl8fFtdLGZ1bmN0aW9uKGUsbil7dFtuXT0hMH0pLHR9ZnVuY3Rpb24gaShlLG4scixpKXtpZihzdC5hY2NlcHREYXRhKGUpKXt2YXIgbyxhLHM9c3QuZXhwYW5kbyx1PSJzdHJpbmciPT10eXBlb2YgbixsPWUubm9kZVR5cGUsYz1sP3N0LmNhY2hlOmUsZj1sP2Vbc106ZVtzXSYmcztpZihmJiZjW2ZdJiYoaXx8Y1tmXS5kYXRhKXx8IXV8fHIhPT10KXJldHVybiBmfHwobD9lW3NdPWY9Sy5wb3AoKXx8c3QuZ3VpZCsrOmY9cyksY1tmXXx8KGNbZl09e30sbHx8KGNbZl0udG9KU09OPXN0Lm5vb3ApKSwoIm9iamVjdCI9PXR5cGVvZiBufHwiZnVuY3Rpb24iPT10eXBlb2YgbikmJihpP2NbZl09c3QuZXh0ZW5kKGNbZl0sbik6Y1tmXS5kYXRhPXN0LmV4dGVuZChjW2ZdLmRhdGEsbikpLG89Y1tmXSxpfHwoby5kYXRhfHwoby5kYXRhPXt9KSxvPW8uZGF0YSksciE9PXQmJihvW3N0LmNhbWVsQ2FzZShuKV09ciksdT8oYT1vW25dLG51bGw9PWEmJihhPW9bc3QuY2FtZWxDYXNlKG4pXSkpOmE9byxhfX1mdW5jdGlvbiBvKGUsdCxuKXtpZihzdC5hY2NlcHREYXRhKGUpKXt2YXIgcixpLG8sYT1lLm5vZGVUeXBlLHU9YT9zdC5jYWNoZTplLGw9YT9lW3N0LmV4cGFuZG9dOnN0LmV4cGFuZG87aWYodVtsXSl7aWYodCYmKHI9bj91W2xdOnVbbF0uZGF0YSkpe3N0LmlzQXJyYXkodCk/dD10LmNvbmNhdChzdC5tYXAodCxzdC5jYW1lbENhc2UpKTp0IGluIHI/dD1bdF06KHQ9c3QuY2FtZWxDYXNlKHQpLHQ9dCBpbiByP1t0XTp0LnNwbGl0KCIgIikpO2ZvcihpPTAsbz10Lmxlbmd0aDtvPmk7aSsrKWRlbGV0ZSByW3RbaV1dO2lmKCEobj9zOnN0LmlzRW1wdHlPYmplY3QpKHIpKXJldHVybn0obnx8KGRlbGV0ZSB1W2xdLmRhdGEscyh1W2xdKSkpJiYoYT9zdC5jbGVhbkRhdGEoW2VdLCEwKTpzdC5zdXBwb3J0LmRlbGV0ZUV4cGFuZG98fHUhPXUud2luZG93P2RlbGV0ZSB1W2xdOnVbbF09bnVsbCl9fX1mdW5jdGlvbiBhKGUsbixyKXtpZihyPT09dCYmMT09PWUubm9kZVR5cGUpe3ZhciBpPSJkYXRhLSIrbi5yZXBsYWNlKE50LCItJDEiKS50b0xvd2VyQ2FzZSgpO2lmKHI9ZS5nZXRBdHRyaWJ1dGUoaSksInN0cmluZyI9PXR5cGVvZiByKXt0cnl7cj0idHJ1ZSI9PT1yPyEwOiJmYWxzZSI9PT1yPyExOiJudWxsIj09PXI/bnVsbDorcisiIj09PXI/K3I6d3QudGVzdChyKT9zdC5wY...