JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<script>
    
</script>

<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 +...

CSS

div#content {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
h1 {margin: 0; padding: 0; color:#fff }
.box {position: relative; width: 100%; height: 500px; display: block;
margin: 0;
padding: 0;
}
.black {background: black;  }
.white {background: grey; }

div#up-left {
position:absolute;
z-index:4px;
left: 0;
top: 0;
width: 50%;
margin: 0;
padding: 0;
}

div#down-right {
position:fixed;
bottom: 0px;
z-index: 5px;
left: 50%;
width: 50%;
margin: 0;
padding: 0;
}

JavaScript

/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return...