JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div>
<h3>
h3 test
</h3>
<p>
 some more text. lots of text. <em>emphasized</em> and <strong>strong</strong> text
</p>
<p>
 some more text. lots of text. <em>emphasized</em> and <strong>strong</strong> text
</p>
<h4>
h4 test
</h4>
<p>
 some more text. lots of text. <em>emphasized</em> and <strong>strong</strong> text
</p>
<p>
 some more text. lots of text. <em>emphasized<aside>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. </aside></em> and <strong>strong</strong> text
</p>
<p>
 some more text. lots of text. <em>emphasized</em> and <strong>strong</strong> text
</p>
<ul>
  <li><h5>
  caption
  </h5>and some more text<ul>
  <li>answer1</li>
  <li>answer 2</li>
  </ul></li>
</ul>
</div>

CSS

body {
  font-family: sans-serif;
  padding: 20px;
  background-color: #4B4B4B;
  background-image: linear-gradient(150deg, transparent 31px, #333 31px, #333 31px, transparent 32px),
    linear-gradient(150deg, transparent 31px, #333 31px, #333 31px, transparent 32px),
    linear-gradient(30deg, transparent 4px, #333 4px, #333 4px, transparent 5px),
    linear-gradient(30deg, transparent 4px, #333 4px, #333 4px, transparent 5px),
    linear-gradient(60deg, transparent 14px, #4b4b4b 14px),
    linear-gradient(90deg, transparent 10px, #333 10px, #333 10px, transparent 11px),
    linear-gradient(0deg, transparent 12px, #4B4B4B 12px),
    linear-gradient(90deg, transparent 10px, #333 10px, #333 10px, transparent 11px);
    background-size: 20px 30px, 20px 30px, 20px 30px, 20px 30px, 20px 30px, 20px 30px, 20px 30px, 20px 30px;
    background-position:  10px 4px, 0 19px, 10px 4px, 0 19px, 10px 15px, 10px 10px, 0 0, 0 0;
}
div {
  margin: 0 auto;
  max-width: 920px;
  padding: 20px;
  background-color: rgba(70, 70, 70, 0.8);
  border-radius: 5px;
  border: 1px solid rgba(63, 63, 63, 1);
  color: #ccc;
}
em {
  color: #eb5;
  font-style: normal;
}
strong {
  color: #eee;
}
h5 {
  line-height: normal;
  padding: 0;
  margin: 0;
  font-weight: bold;
  color: #ddd;
}
h3, h4 {
  color: #fff;
}
p, h5 {
  font-size: 16px;
}