JSFiddle - React, Tailwind, and code Playground

HTML

<p class="select">Pablo <ruby><rb>Casals</rb><rp> (“</rp><rt>kuh-ZALLS</rt><rp>”)</rp></ruby> became the first to record all six of Bach’s Cello Suites in the 1930s.</p>

<hr />

<ul>
<li>
<p>Copy the sentence above and compare it to the result below.</p>
<p><input type="text" /><br />
<input type="text" value="Pablo Casals became the first to record all six of Bach’s Cello Suites in the 1930s." readonly disabled /></p>
</li>
<li>
<p>Try finding the string “Pablo Casals became” using <kbd>Ctrl-F</kbd>.</p>
</li>
</ul>

CSS

.select { user-select: all; }
input { font: inherit; width: 40em; }