JSFiddle - React, Tailwind, and code Playground

HTML

<div class="markdown-content">
<h1 id="h1">H1です</h1>
<h2 id="h2">H2です</h2>
<h3 id="h3">H3です</h3>
<h4 id="h4">H4です</h4>
<h5 id="h5">H5です</h5>
<h6 id="h6">H6です</h6>
	
<ul>
<li>ul リスト1</li>
<li>ul リスト2</li>
<li>ul リスト3</li>
</ul>
    
<ol>
<li>ol リスト1</li>
<li>ol リスト2</li>
<li>ol リスト3</li>
</ol>
				
<p><a href="https://www.example.com">リンクを貼る</a></p>

				
<table>
<thead>
<tr>
<th>Table</th>
<th style="text-align:center">hoge</th>
<th style="text-align:right">huga</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td style="text-align:center">1個</td>
<td style="text-align:right">5万円</td>
</tr>
<tr>
<td>キウイ</td>
<td style="text-align:center">5個</td>
<td style="text-align:right">10円</td>
</tr>
<tr>
<td>バナナ</td>
<td style="text-align:center">6本</td>
<td style="text-align:right">900円</td>
</tr>
</tbody>
</table>
</div>

CSS

.markdown-content *,
.markdown-content *:before,
.markdown-content *:after {
    font-size: 14px;
    font-family: monospace;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-bottom: 1em;
    margin-bottom: 2ch;
}

.markdown-content h1:before {
    content: '# ';
}

.markdown-content h2:before {
    content: '## ';
}

.markdown-content h3:before {
    content: '### ';
}

.markdown-content h4:before {
    content: '#### ';
}

.markdown-content h5:before {
    content: '##### ';
}

.markdown-content h6:before {
    content: '###### ';
}

.markdown-content pre,
.markdown-content blockquote {
    margin: 1em 1em 1em 1em;
    margin: 2ch 2ch 2ch 2ch;
    clear: both;
}

.markdown-content pre code:before,
.markdown-content pre code:after {
    content: '```';
    display: block;
}

.markdown-content p {
    margin: 0 0 1em 0;
    margin: 0 0 2ch 0;
}

.markdown-content p code:before,
.markdown-content p code:after {
    content: '`';
}

.markdown-content blockquote {
    position: relative;
    padding-left: 1em;
    padding-left: 2ch;
    overflow: hidden;
}

.markdown-content blockquote:after {
    content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
    white-space: pre;
    position: absolute;
    top: 0;
    left: 0;
}

.markdown-content li {
    list-style-type: none;
    list-style-position: inside;
    padding-left: 3ch;
}

.markdown-content ul,
.markdown-content ol {
    margin: 0 0 1em 0;
    margin: 0 0 2ch 0;
}

.markdown-content ul ul,
.markdown-content ol ul,
.markdown-content ul ol,
.markdown-content ol...