JSFiddle - React, Tailwind, and code Playground

HTML

<pre><code class="code-html">&lt;pre&gt;&lt;code&gt;
&lt;figure&gt;
&lt;blockquote cite=&quot;urn:ISBN:978-4088511269&quot;&gt;
&lt;p&gt;さすがディオ！おれたちにできない事を平然とやってのけるッ&lt;br&gt;
そこにシビれる！あこがれるゥ！&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p class=&quot;&quot;&gt;&lt;cite&gt;ジョジョの奇妙な冒険 １巻 83頁&lt;/cite&gt; 少年&lt;/p&gt;
&lt;/figure&gt;
&lt;/code&gt;&lt;/pre&gt;
</code></pre>
<pre><code class="code-css">figure {
    margin: 10px ;
    padding: 0 10px 10px ;
    border: 1px #000 solid ;
}

blockquote {
    text-align: center ;
    position: relative ;
    background: #fff ;
}

blockquote::before,
blockquote::after {
    position: absolute ;
    font: 4em Georgia ;
    color: #f66 ;
}

blockquote::before {
    top: 0 ;
    left: 0 ;
    content: "“" ;
}

blockquote::after {
    bottom: -0.5em ;
    right: 0em ;
    content: "”" ;
}

blockquote p { padding: 20px ; }
blockquote+p { text-align: right ; }
p cite::before { content: "― " ; }</code></pre>

CSS

pre code {
	display: block ;
	padding: 10px ;
    margin: 0px 10px 20px ;
	line-height: 1.4em ;
	-moz-border-radius: 2px ;
	border-radius: 2px ;
	border: 1px #999 solid ;
	background: #333333 ;
	color: #eeeeee ;
    position: relative ;
}

pre code::after {
    font: bold normal 3em Impact ;
    color: rgba(255,255,255,0.5) ;
    position: absolute ;
    bottom: 10px ;
    right: 15px ;
}

.code-css:after { content: "CSS" ; }
.code-html:after { content: "HTML" ; }