JSFiddle - React, Tailwind, and code Playground

by merganser

HTML

<div id="page">
			
			
			<p>You can add some basic HTML (Hypertext Markup Language) tags
      to format the text in your messages. Tags open with a less-than sign (&lt;)
      and close with a greater-than sign (&gt;), like this: <span class="bold">&lt;p&gt;</span> </p>
			<p>There are two kinds of HTML tags: paired and unpaired. </p>
			<p>Paired tags require an opening tag that turns a formatting feature <span class="bold">on</span> and
			  a closing tag that turns the feature <span class="bold">off</span>.
			  Paired tags must surround the text you want formatted with that feature.
			  For example, <strong>&lt;u&gt; </strong> and <strong>&lt;/u&gt; </strong> will
			  underline text. You must include the slash ( / ) in the closing tag
			  in order for the pair to work. </p>
			<p>Unpaired tags work alone, and are usually placed before the text you
			  want formatted. </p>
			<p class="h2 blueBackground">&nbsp;Single
                  Carriage Return - &lt;br&gt; tag	        </p>
			  <div class="column2"> <span class="big"><u>To display</u>:			</span>
			    <p>This is the first line of text.<br>
		    This is the second line of text.</p>
	        </div>
             <div class="column2"> <span class="big"><u>Type</u>:
             </span>               
               <p>This is the first line of text. <span class="bold">&lt;br&gt;</span> <br>
                  This is the second line of text.
		       </p>
            </div>

             <p><span class="bold">Note:</span> &lt;br&gt; stands for <em>break</em>             </p>
             <p class="h2 blueBackground">&nbsp;Double
				  Carriage Return - &lt;p&gt; tag</p>
			  
			 <div class="column2"> 
			  <span class="big"><u>To display</u>: </span>
<p>Read this sentence first.</p>
		    <p>Read this sentence next. </p></div>
              <div class="column2"><span class="big"><u>Type</u>: </span>
                <p>Read this sentence first. <span class="bold">&lt;p&gt;</span> <br>
              ...

CSS

.h2 {
    font-size: 26px;
    color: #666;
    line-height: 1.5em;
}
.blueBackground {
    background-color: rgba(172, 197, 237, .25);
}