JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="a"></div>
<div></div>
<div></div>
<div class="a"></div>
<p id="scroll"></p>
<p class="path"></p>

CSS

* {
  position: relative;
}
.a {
  z-index: 20;
}

#scroll {
  background-image: url(http://findicons.com/files/icons/2484/hathix_cartoon_animals/300/owl.png);
  height: 50px; width: 50px;
  background-size: cover;
  position: fixed;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  z-index: 15;
}
.path {
  height: 100vh;
  border-right: 2px dashed #333;
  border-left: 2px dashed #333;
  width: 20px;
  z-index: 14;
  position: fixed;
  left:calc(50% - 10px); top: 0;
}

JavaScript

$('div').each(function() {
	let str = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil quod, nostrum numquam hic enim, sed vel accusantium, ab officia nesciunt soluta odio molestiae nulla esse voluptate sit, laboriosam odit suscipit quasi corrupti labore unde molestias! Cum dolor repellendus, ipsam non fuga totam est, earum consequuntur quis officiis eveniet labore commodi enim perferendis magnam eaque. Repellat ad commodi sunt rerum eveniet laboriosam hic nesciunt minima, dolores maxime culpa dolore sequi reprehenderit ullam porro voluptatibus saepe et perferendis! Nemo omnis dicta quia consequatur neque nihil cupiditate reiciendis, nobis maxime quos quae cum, ratione voluptate error debitis nesciunt possimus odio voluptates, in quaerat.';
	$(this).css({
  	backgroundColor: "#"+((1<<24)*Math.random()|0).toString(16),
    height: '100vh'
    });
    $(this).text(str);
});