JSFiddle - React, Tailwind, and code Playground

by Andreas Burg

HTML

<h1>no BR</h1>
<b>Paragraph</b>
<p>
  line 1
    line 2
      line 3
</p>

<hr>
<b>code</b>
<code>
  line 1
    line 2
      line 3
</code>

<hr>
<b>pre</b>
<pre>
  line 1
    line 2
      line 3
</pre>

<h1>with BR</h1>
<b>Paragraph</b>
<p>
  line 1<br>
    line 2<br>
      line 3<br>
</p>

<hr>
<b>code</b>
<code>
  line 1<br>
    line 2<br>
      line 3<br>
</code>

<hr>
<b>pre</b>
<pre>
  line 1<br>
    line 2<br>
      line 3<br>
</pre>

code changes font-family and displays inline<br>
pre shows text as is

CSS

br {
  display: initial; /* change to none and run */
}
p,
code {
  white-space: initial; /* change to pre and run */
}