JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<dl>
    <dt><a href="#">Coffee</a></dt>
    <dd>Black hot drink</dd>
  <dt><a href="#asd" title="Coffee">Coffee</a></dt>
    <dd>White cold drink</dd>
</dl>
<a href="#asd" title="Coffee">Coffee</a>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<h1>Great header</h1>
<h2>Big header</h2>
<h3>Medium header</h3>
<h4>Small header</h4>
<h5>Tiny header</h5>
<h6>Micro header</h6>
<button>Button</button>
<button class="warning">Warning button</button>
<button class="error">Error button</button>
<button class="notice">Notice button</button>
 
<p>Paragraph</p>
<p>Paragraphasdasdasdasdascfasvrdtbyfnjhgtrfterdtgur6rfd6rfvu6r</p>
asdasd
<hr>asdasdasdasd
    asdas
    <blockquote>blockquoteblockquote</blockquote>
    <address>address</address>qwewqeqwe
    
<pre class="notice">echo "Hello World!";</pre>
<code class="error">echo "Hello World!";
</code>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button 
{	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}
body {	line-height: 1;background:#fff;font-family: sans-serif; color:#000;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
a {
    color: #05c;
    text-decoration: none;
}
a:after{
    content: '\2197 ';
}
a:active {text-decoration: underline;} 
a:hover {
    color: #096;
    text-decoration: underline;
}
a:visited {
color: #37587D;
}

h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.715em;
}
h4 {
  font-size: 1.438em;
}
h5 {
  font-size: 1.250em;
}
h6 {
  font-size: 1em;
}
p {
  margin: 10px 2px;
}
hr {
      height: 0;
  -moz-box-sizing: content-box;
       box-sizing: content-box;
  border: 0;
  border-top: 1px solid #ddd;
  margin: 1em 0;
}
blockquote {
  border-left: 4px solid #ddd;
  padding-left: 1em;
  margin: 1em 0;
  font-weight: 200;
  font-size: 1.1em;
}
address {
  color: #666;
  font-size: 1em;
  line-height: 1.4;
}
br {
    clear: both;
}
b,
strong {
  font-weight: bold;
}
code,
pre {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 1em;
  display: block;
  padding: 1em;
    white-space: pre;
  margin: 0 0 1em;
  line-height: 1.428571429;
  color:...