JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="grid"></div>

<p>Lorem ipsum</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nobis veritatis dicta, sit non quos, tempore soluta voluptatum delectus nesciunt dolorum adipisci et omnis magnam? Expedita, dolorum? Omnis, debitis voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ab nobis quaerat ducimus nostrum deleniti excepturi quo, tenetur iure provident eius, nulla aliquam harum molestias a unde in aspernatur. Quos?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nobis veritatis dicta, sit non quos, tempore soluta voluptatum delectus nesciunt dolorum adipisci et omnis magnam? Expedita, dolorum? Omnis, debitis voluptatum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nobis veritatis dicta, sit non quos, tempore soluta voluptatum delectus nesciunt dolorum adipisci et omnis magnam? Expedita, dolorum? Omnis, debitis voluptatum.</p>

SCSS

html, body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

html {
	font-size: 14px;
}

body {
	font-family: 'Impact';
	position: relative;
}

.grid {
	background-image: linear-gradient( red 1px, transparent 1px, transparent );
	background-size: 63px 63px;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
}

p {
	background: rgba(0,0,0,0.1);
	font-size: 3rem;
	margin: 0;
	line-height: 1.5;
	padding-top: 1.05rem;
	margin-bottom: 3.45rem;
	vertical-align: baseline;
}