JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="markdown-body">
<h3>
<a id="user-content-paragraphs" class="anchor" href="#paragraphs" aria-hidden="true"><span class="octicon octicon-link"></span></a>Paragraphs</h3>
<p>Paragraphs in Markdown are just one or more lines of consecutive text followed by one or more blank lines.</p>
<pre><code>On July 2, an alien mothership entered Earth's orbit and deployed several dozen saucer-shaped "destroyer" spacecraft, each 15 miles (24 km) wide.
On July 3, the Black Knights, a squadron of Marine Corps F/A-18 Hornets, participated in an assault on a destroyer near the city of Los Angeles.
</code></pre>
<h3>
<a id="user-content-newlines" class="anchor" href="#newlines" aria-hidden="true"><span class="octicon octicon-link"></span></a>Newlines</h3>
<p>The biggest difference with writing on GitHub is the way we handle linebreaks. With Markdown, you can hard wrap paragraphs of text to have them combine into a single paragraph. We find this causes a huge number of unintentional formatting errors. In comments, GitHub treats newlines in paragraph-like content as real line breaks, which is usually what you intended.</p>
<p>The next paragraph contains two phrases separated by a single newline character:</p>
<pre><code>Roses are red
Violets are blue
</code></pre>
<p>becomes</p>
<p>Roses are red<br>
Violets are blue</p>
<h3>
<a id="user-content-headings" class="anchor" href="#headings" aria-hidden="true"><span class="octicon octicon-link"></span></a>Headings</h3>
<p>You can create a heading by adding one or more # symbols before your heading text. The number of <code>#</code> you use will determine the size of the heading.</p>
<h1>
<a id="user-content-largest-which-have-underline" class="anchor" href="#largest-which-have-underline" aria-hidden="true"><span class="octicon octicon-link"></span></a>Largest which have underline</h1>
<h2>
<a id="user-content-second-largest-which-have-underline" class="anchor" href="#second-largest-which-have-underline"...
CSS
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}a:active,a:hover{outline:0}strong{font-weight:bold}h1{font-size:2em;margin:0.67em 0}img{border:0}pre{overflow:auto}code,pre {font-family:monospace, monospace;font-size:1em}input {color:inherit;font:inherit;margin:0}input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"] {box-sizing:border-box;padding:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:border-box}input {font:13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"}body{font:13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";color:#333;background-color:#fff}a{color:#4183c4;text-decoration:none}a:hover,a:active{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:15px;margin-bottom:15px;line-height:1.1}h1{font-size:30px}h2{font-size:21px}h3{font-size:16px}h4{font-size:14px}h5{font-size:12px}h6{font-size:11px}blockquote{margin:0}ul,ol{padding:0;margin-top:0;margin-bottom:0}ol ol {list-style-type:lower-roman}code{font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;font-size:12px}pre{margin-top:0;margin-bottom:0;font:12px Consolas, "Liberation Mono", Menlo, Courier, monospace}::-webkit-input-placeholder,:-moz-placeholder{color:#aaa}::-webkit-validation-bubble-message{font-size:12px;color:#fff;background:#9c2400;border:0;border-radius:3px;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.1)}input::-webkit-validation-bubble-icon{display:none}::-webkit-validation-bubble-arrow{background-color:#9c2400;border:solid 1px #9c2400;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.1)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}@-webkit-keyframes...