JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div>
  <span class="whatif">What if</span>
  <mark contentEditable>X was</mark>
  <mark contentEditable>Y?</mark>
</div>

CSS

@font-face {
  font-family: 'Quincy CF';
  font-display: swap;
  src: url('https://pubstatic.production.neofinancial.com/fonts/quincy-cf/QuincyCF-Text.otf');
  font-style: normal;
  font-weight: 400;
}

body {
	font-family: 'Quincy CF';
	background: #000;
	color: #fff;
	font-size: 15vw;
	letter-spacing: -2px;
	line-height: 1.1em;
	margin: 20px;
}

mark {
	display: inline-block;
	background: transparent;
	color: #000;
	line-height: 1em;
	position: relative;
}

mark::before {
	position: absolute;
	inset: 0.05em -0.1em 0.05em 0.02em;
	background: #E6AA23;
	z-index: -1;
	content: "";
}

.whatif {
	display: block;
	line-height: 0.8em;
}