JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<span...

CSS

body {
	font-family: Consolas;
	word-wrap: break-all;
	word-break: break-all;
	margin: 0;
	overflow: hidden;
	background: #000;
	color: #333;
}

span#h {
	color: #444;
}

span#l {
	color: #3c6b7d;
}

JavaScript

console.clear();

let s = document.querySelector("#s");
let str = s.textContent;
let newStr = "";
document.body.removeChild(s);

let isOpen = false;
for(let i=0;i<str.length;++i) {
	if (Math.random() < 0.1) {
		let h = "h";
		
		if (Math.random() < 0.1) {
			h = "l";
		}
		
		newStr += isOpen ? `<span id='${h}'>` : "</span>";
		isOpen = !isOpen;
	}
	
	newStr += str[i];
}

console.log(newStr);
document.body.innerHTML = newStr;