JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
</head>

<body>

<p><b>Example of a string with lots of empty lines:</b></p>
<p>line1<br>
line2 directly under line1</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>line3</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>line4</p>
<p>&nbsp;</p>
<p><b>This should become:</b></p>
<p>Line1<br>
line2 directly under line1</p>
   <br>
<p>Line3</p>
   <br>
<p>Line4</p>

</body>

</html>