JSFiddle - React, Tailwind, and code Playground

HTML

<code>A</code>
<code>B</code>
<code>C</code>

CSS

code {border:2px solid #f0f;padding:2em}
pre {border:2px dashed #000;padding:2em}

JavaScript

$('code').contents().unwrap().wrap('<pre/>');