JSFiddle - React, Tailwind, and code Playground

by MrStan1slav

HTML

<div id="container">
		<div class="block">
			<span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quam incidunt in tenetur modi, explicabo unde recusandae adipisci eaque beatae.</span>
			<div id="blick1"></div>
		</div>
		<div class="block" id="block2">
			<span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur temporibus alias sit magnam suscipit maxime libero harum nam eaque obcaecati.</span>
			<div id="blick2"></div>
		</div>
		<div class="block" id="wide">
			<span class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quam incidunt in tenetur modi, explicabo unde recusandae adipisci eaque beatae.</span>
			<div id="blick3"></div>
		</div>
		<div id="line1">
		</div>
	</div>

CSS

* {
	box-sizing:border-box;
}
body {
	margin:0;
	padding:0;
	height:1000px;
	background:linear-gradient(to bottom, pink 2%, lightpink 51%, #eee 100%);
	background-attachment:fixed;
}
#container {
	width:410px;
	padding:5px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	box-sizing:content-box;
	overflow:hidden;
}
.block {
	position:relative;
	width:200px;
	height:200px;
	font-family:Arial;
	color:white;
	margin-bottom:5px;
	padding:5px;
	border:3px solid rgba(255, 255, 255, .7);
}
#blick1 {
	position:absolute;
	right:-9px;
	top:30px;
	width:15px;
	height:50px;
	background: -moz-radial-gradient(center center, ellipse farthest-side, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .65) 20%, rgba(255, 255, 255, .60) 40%, rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .15) 80%, rgba(255, 255, 255, .0) 100%);
}
#blick2 {
	position:absolute;
	left:30px;
	top:-9px;
	width:50px;
	height:15px;
	background: -moz-radial-gradient(center center, ellipse farthest-side, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .65) 20%, rgba(255, 255, 255, .60) 40%, rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .15) 80%, rgba(255, 255, 255, .0) 100%);
}
#blick3 {
	position:absolute;
	left:110px;
	bottom:-9px;
	width:50px;
	height:15px;
	background: -moz-radial-gradient(center center, ellipse farthest-side, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .65) 20%, rgba(255, 255, 255, .60) 40%, rgba(255, 255, 255, .35) 60%, rgba(255, 255, 255, .2) 70%, rgba(255, 255, 255, .15) 80%, rgba(255, 255, 255, .0) 100%);
}
#wide {
	width:100%;
}
#line1 {
	position:absolute;
	top:-25%;
	right:100px;
	transform:rotate(20deg);
	height:150%;
	width:150px;
	background:rgba(255, 255, 255, .1);
}
.text {
	position:relative;
	z-index:3;
}

JavaScript

var d = document;
var blick1 = d.getElementById("blick1");
var line1 = d.getElementById("line1");
window.addEventListener("scroll", function() {
	var offset = window.pageYOffset;
	blick1.style.top = (30 + offset / 8) + "px";
	blick2.style.left = (30 + offset / 8) + "px";
	blick3.style.left = (110 - offset / 8) + "px";
	line1.style.right = (100 - offset / 15) + "px";
});