JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<section class="box">
  <p>
    Introducing...
  </p>
  <h1 id="outline-text">
Simple, pixel-perfect text stroking for the web.
</h1>
  <p>
    For striking, impactful text.
  </p>
  <ul>
    <li>line-height: <span id="lineHeight"></span></li>
    <li>font-size: <span id="fontSize"></span></li>
  </ul>
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i');

.box,
section {
  width: 500px;
  background: deepPink;
  text-align: center;
  padding: 20px;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  border-top: 15px dodgerBlue solid;
  border-bottom: 15px dodgerBlue solid;
  position: relative;
  clear: left
}

.box h1 {
  font-size: 2.3em;
  line-height: 1.2em;
  font-style: normal;
  font-weight: 700;
}

.box p {
  color: white;
  margin: 5px 0;
}

.box ul {
  text-align: left;
}

JavaScript

var myStrokeColor = 'gold';
var myStrokeWidth = 4;

/*

	strokeText.js
	by @inorganik

*/

/*

	strokeText.js
	by @inorganik

*/

var StrokeText = function(elem, options) {

	var self = this;
	self.version = '0.11.1';
	self.elem = (typeof elem === 'string') ? document.getElementById(elem) : elem;

	// default options
	self.options = {
		lineCap: 'round',
		lineJoin: 'round',
		miterLimit: 10,
		lineDashArray: [0, 0],
		debug: false,
		disableForFirefox: false
	}
	// extend default options with passed options object
	if (options && typeof options === 'object') {
		for (var key in self.options) {
			if (options.hasOwnProperty(key) && options[key] !== null) {
				self.options[key] = options[key];
			}
		}
	}

	// helper functions
	function insertAfter(node, refNode) {
		if (node && refNode && refNode.parentNode) {
			refNode.parentNode.insertBefore(node, refNode.nextSibling);
		}
	}
	function remove(node) {
		if (node && node.parentNode) {
			node.parentNode.removeChild(node);
		}
	}
	function logProp(prop) {
		if (self[prop]) {
			console.info('┃ '+prop+':', self[prop]);
		}
	}
	// canvas doesn't wrap text
	function wrapText(context, text, x, y, maxWidth, lineHeight) {
		var words = text.split(' '),
			line = '',
			lastSegment = '';
		function measureAndProcess(segment, i) {
			var testLine = line;
			if (i > 0 && lastSegment.substr(-1) !== '-') {
				testLine += ' '+ segment;
			}
			else {
				testLine += segment;
			}
			var metrics = context.measureText(testLine);
			if (metrics.width > maxWidth && i > 0) {
				context.strokeText(line, x, y);
				line = segment;
				y += lineHeight;
			}
			else {
				line = testLine;
			}
			lastSegment = segment
		}
		words.forEach(function(word, i) {
			if (word.indexOf('-') > -1) {
				var nextWord = word;
				while (nextWord.indexOf('-') > -1) {
					var hyphen = nextWord.indexOf('-') + 1,
						segment = nextWord.substring(0, hyphen);
					nextWord = nextWord.substring(hyphen);
					measureAndProcess(segment,...