JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <h1>Document Element Selector</h1>
  <p>Choose any block element from the site below</p>
  <ul>
    <li>Teset List Item 1</li>
    <li>Teset List Item 2</li>
    <li>Teset List Item 3</li>
    <li>Teset List Item 4</li>
  </ul>
</div>

CSS

html { font-size: 14pt; }
body { margin: 1rem; }
.wrapper { margin: 0 auto; max-width: 40rem; }
iframe { width: 100%; height: 20rem; }
h1:hover, p:hover, li:hover
{
  background: rgba(127,127,127,0.5);
}