JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<canvas id="baselines"></canvas>
<!--
<h1>Heading 1 AaBbCcDdEeFf 1234567890</h1>
<h2>Heading 2 AaBbCcDdEeFf 1234567890</h2>
<h3>Heading 3 AaBbCcDdEeFf 1234567890</h3>
<h4>Heading 4 AaBbCcDdEeFf 1234567890</h4>
<h5>Heading 5 AaBbCcDdEeFf 1234567890</h5>
<h6>Heading 6 AaBbCcDdEeFf 1234567890</h6>
-->
<p>Lorem ipsum dolor sit amet, ad populo labores delicatissimi pri. Pro facer affert no, aeterno efficiantur ius et, id has quot facilisis scribentur. Duis aeque noluisse an ius. No usu adhuc prompta omnesque. No mea partiendo tincidunt, nam et novum iudicabit.</p>

<p>Ut pri posse viderer adversarium, te enim everti usu, decore fastidii delectus qui an. Munere partem regione ut vel, sea in iudico expetendis. In vocent consequat torquatos est, at mel veniam conceptam. Qui equidem facilisi in. Vix clita ornatus theophrastus ad.</p>

<p>Ei invidunt quaerendum dissentiunt quo, ut epicurei salutatus sed, sit menandri nominati ex. Id cetero euismod apeirian duo, vim audiam sanctus in. Vim ullamcorper deterruisset no, blandit disputando ius ex. Eos at doctus epicurei perpetua, melius latine vix te. Diam virtute necessitatibus per ei.</p>

SCSS

#baselines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

body {
	line-height: 20px;
}

p {
	margin: 4px 0 20px;
}

JavaScript

/* Get document dimensions */
var docH = document.body.clientHeight,
	docW = document.body.clientWidth;

/* Set canvas dimensions */
var bls = document.getElementById('baselines');
	bls.height = docH || 100;
	bls.width = docW;

/* Default params */
var lh = 20;

function drawLines( lineHeight, offset ){
	for( var i = offset || 0; i < bls.height; i += lineHeight ){
		var ctx = bls.getContext('2d');
		ctx.rect(0, i, docW, 1);
		ctx.fillStyle = '#FF7A91';
		ctx.fill();
	}
}

drawLines( lh );