JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<div class="pagebg_outer"><div class="pagebg_inner"></div></div>

<div class="contents">
	<div class="contentbg_outer"><div class="contentbg_inner"></div></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

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

body {
	background-color: #ccc;
}

.pagebg_outer {
	z-index: -1;
	position: fixed;
	background-color: blue;
	left: 50%;
	top: -300px;
	height: 600px;
	width: 200%;
	transform-origin: 50% 100%;
	transform: translateX(-50%) rotate(-15deg);
	overflow: hidden;
}
.pagebg_inner {
	position: absolute;
	background-color: green;
	left: 50%;
	bottom: -300px;
	height: 600px;
	width: 50%;
	transform-origin: 50% 50%;
	transform: translateX(-50%) rotate(15deg);
}

.contents {
	z-index: 1;
	position: relative;
	width: 100%;
	max-width: 450px;
	margin: 50px auto 0px;
	background-color: #fff;
	overflow: hidden;
}

.contentbg_outer {
	z-index: -1;
	position: absolute;
	background-color: purple;
	left: 50%;
	top: -350px;
	height: 600px;
	width: 200%;
	transform-origin: 50% 100%;
	transform: translateX(-50%) rotate(-15deg);
	overflow: hidden;
}
.contentbg_inner {
	position: absolute;
	background-color: yellow;
	left: 50%;
	bottom: -300px;
	height: 600px;
	width: 50%;
	transform-origin: 50% 50%;
	transform: translateX(-50%) rotate(15deg);
}