JSFiddle - React, Tailwind, and code Playground

HTML

<p>Lorem ipsum dolor sit amet, consectepture adipisicing elit, sed do eiusmod.</p>
<pre><code>&lt;div id="foo"&gt;
    &lt;div id="bar"&gt;test&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>Lorem ipsum dolor sit amet, consectepture adipisicing elit, sed do eiusmod.</p>

CSS

pre {
    margin: 0.5em 2em;
}
pre > code {
    display: block;
    border: #ccc solid 1px;
    padding: 0.4em;
    max-height: 10em;
    overflow: auto;
}
pre:before {
    content: "Code:";
    display: block;
    font-size: 0.8em;
    background: #e8e8e8;
    border: #ccc solid 1px;
    border-bottom: none;
}