JSFiddle - React, Tailwind, and code Playground

by DJS Baker

HTML

<div id="content">
	<div id="down-left">
    <div style="50px" class="box red"></div>
    <div style="100px" class="box blue"></div>
    <div style="150px" class="box yellow"></div>
    <div style="200px" class="box purple"></div>
    <div style="250px" class="box pink"></div>
    <div style="300px" class="box red"></div>
    <div style="350px" class="box blue"></div>
    <div style="400px" class="box yellow"></div>
    <div style="450px" class="box purple"></div>
    <div style="500px" class="box pink"></div>
  </div>
	<div id="down-right">
    <div style="50px" class="box red"></div>
    <div style="100px" class="box blue"></div>
    <div style="150px" class="box yellow"></div>
    <div style="200px" class="box purple"></div>
    <div style="250px" class="box pink"></div>
    <div style="300px" class="box red"></div>
    <div style="350px" class="box blue"></div>
    <div style="400px" class="box yellow"></div>
    <div style="450px" class="box purple"></div>
    <div style="500px" class="box pink"></div>
  </div>
</div>

CSS

.box {width: 50px; height: 50px; display: block; background: green}

.red {background: red}
.blue {background: blue}
.yellow {background: yellow}
.purple {background: purple}
.pink {background: pink}

div#content {
	width: 100px;
}

div#up-left {
	position:fixed;
	z-index:4px;
  left: 0;
  top: 0;
}
	
div#down-right {
	position:fixed;
	bottom:0px;
	z-index:5px;
  right: 0;
}

JavaScript

function crisscross() {
$('down-left').style.bottom = '-' + window.scrollY + 'px';
$('down-right').style.bottom = '-' + window.scrollY + 'px';
$('left').style.left = '-' + window.scrollY + 'px';
$('right').style.right = '-' + window.scrollY + 'px';
}