<div class="space-y-4 overflow-x-auto whitespace-nowrap">
  <h1 class="type-scale-1">Type Scale 1</h1>
  <h2 class="type-scale-2">Type Scale 2</h2>
  <h3 class="type-scale-3">Type Scale 3</h3>
  <h4 class="type-scale-4">Type Scale 4</h4>
  <h5 class="type-scale-5">Type Scale 5</h5>
  <h6 class="type-scale-6">Type Scale 6</h6>
  <h6 class="type-scale-7">Type Scale 7</h6>
  <h6 class="type-scale-8">Type Scale 8</h6>
  <h6 class="type-scale-9">Type Scale 9</h6>
  <h6 class="type-scale-10">Type Scale 10</h6>
  <h6 class="type-scale-11">Type Scale 11</h6>
  <h6 class="type-scale-12">Type Scale 12</h6>
  <h6 class="type-scale-13">Type Scale 13</h6>
</div>

<div class="space-y-4">
  <h1 class="h1">Heading 1</h1>
  <h2 class="h2">Heading 2</h2>
  <h3 class="h3">Heading 3</h3>
  <h4 class="h4">Heading 4</h4>
  <h5 class="h5">Heading 5</h5>
  <h6 class="h6">Heading 6</h6>
</div>

<p>The quick brown fox jumps over the lazy dog</p>

<blockquote class="blockquote">
  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, aliquid. Molestias, odio illum voluptatibus natus dignissimos, quidem
  est unde aspernatur veniam pariatur fuga distinctio esse in quas, repellendus neque reiciendis!"
</blockquote>

<a href="/" class="anchor">Anchor</a>

<pre class="pre">The quick brown fox jumps over the lazy dog.</pre>

<div>Insert the <code class="code">.example</code> class here.</div>

<div>Press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">C</kbd> to copy.</div>

<div class="w-full">
  <del class="del"><s>Always</s> Gonna Give You Up</del>
  <ins class="ins" cite="https://youtu.be/dQw4w9WgXcQ" datetime="10-31-2022"> Never Gonna Give You Up </ins>
</div>

<ul class="list-inside list-disc space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

<ul class="list-inside list-decimal space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

<ul class="list-inside list-none space-y-2">
  <li>Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</li>
  <li>Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</li>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</li>
</ul>

<dl class="space-y-2">
  <div>
    <dt class="font-bold">Item A</dt>
    <dd class="opacity-60">Id maxime optio soluta placeat ea eaque similique consectetur dicta tempore.</dd>
  </div>
  <div>
    <dt class="font-bold">Item B</dt>
    <dd class="opacity-60">Repellat veritatis et harum ad sint reprehenderit tenetur, possimus tempora.</dd>
  </div>
  <div>
    <dt class="font-bold">Item C</dt>
    <dd class="opacity-60">Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.</dd>
  </div>
</dl>

<nav>
  <!-- (optional header text here) -->
  <ul class="space-y-2">
    <li>
      <a class="anchor" href="#">Home</a>
    </li>
    <li>
      <a class="anchor" href="#">About</a>
    </li>
    <li>
      <a class="anchor" href="#">Blog</a>
    </li>
  </ul>
</nav>