JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<aside>
		<p>For details, <a href="readme.md">check out README.md</a>. You can also check out the <a href="https://github.com/T-Fletcher/html-content" title="visit the Github website">original repository on Github</a>.</p>
	</aside>
	<hr>
	<main>
		<h2>Headings</h2>
		<h1>This is a 1st level heading</h1>
		<p>This is a test paragraph.</p>
		<h2>This is 2nd level heading</h2>
		<p>This is a test paragraph.</p>
		<h3>This is 3rd level heading</h3>
		<p>This is a test paragraph.</p>
		<h4>This is 4th level heading</h4>
		<p>This is a test paragraph.</p>
		<h5>This is 5th level heading</h5>
		<p>This is a test paragraph.</p>
		<h6>This is 6th level heading</h6>
		<p>This is a test paragraph.</p>
		<hr>
		



		<h2>Navigation</h2>
		<p>The following nested <code>&lt;a&gt;</code> tags inside a <code>&lt;nav&gt;</code> tag, separated by <code>&lt;br&gt;</code>s:</p>
		<nav>
			<a href="#">Menu items 1</a>
			<br>
			<a href="#">Menu items 2</a>
			<br>
			<a href="#">Menu items 3</a>
		</nav>
		<p>The following nested <code>&lt;a&gt;</code> tags inside a <code>&lt;li&gt;</code>, inside a <code>&lt;ul&gt;</code>, inside a <code>&lt;nav&gt;</code> tag:</p>
		<nav>
			<ul>
				<li><a href="#">Menu items 1</a></li>
				<li><a href="#">Menu items 2</a></li>
				<li><a href="#">Menu items 3</a></li>
			</ul>
		</nav>
		<hr>
		



		<h2>Basic block level elements</h2>
		<p>This is a normal paragraph (<code>&lt;p&gt;</code> element). To add some length to it, let us mention that this page was primarily written for testing the effect of <strong>user style sheets</strong>.</p>
		<p>This is another paragraph, containing some <strong>strong text</strong> (<code>&lt;strong&gt;</code>) and <em>italicised text</em> (<code>&lt;em&gt;</code>).</p>
		<div>This is a <code>&lt;div&gt;</code> element. Authors may use such elements instead of paragraph markup for various reasons. (End of <code>&lt;div&gt;</code>.)</div>
		<blockquote>
			<p>This is a block quotation...