JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<div class="bg_page bg"></div>

<div class="contents">
	<div class="bg_contents bg2"></div>
	<h3>Title</h3>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
	<p>Text</p>
</div>

CSS

*,:before,:after {margin:0;padding:0;box-sizing:border-box;}

body {
	background-color: #ccc;
}

.bg_page, .bg_contents {
	position: fixed;
	top: 0px;
	
	/* position and size background */
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
	width: 100%;
	height: 300px;
	
	/* select scaling pivot position */
	background-position: center bottom;
	
	/* let the browser do the scaling work */
	background-size: cover;
}

.contents {
	position: relative;
	overflow: hidden;
	margin: 50px auto 0px;
	padding: 30px 20px;
	background-color: #fff;
	
	/* position in front of bg */
	z-index: 1;
	
	/*
	   width has to be relative to page,
	   as the bg inside will have to scale
	   relative to the page through .contents' width
	*/
	width: 80%;
}

.bg_contents {
	/* make it scroll with the content */
	position: absolute;
	
	/* adjust for .contents margin-top: */
	top: -50px;
	
	/*
	   oversize relative to .contents to match page width:
	   1.25 * 80% = 100%
	*/
	width: 125%;
}

/* the background images (the same image but differently colored) */
.bg {
	background-image:...