<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="display">Display</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">128px / 8rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.display</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h1 class="h1">Heading 1</h1>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">96px / 6rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h1</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h2 class="h2">Heading 2</h2>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">72px / 4.5rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h2</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h3 class="h3">Heading 3</h3>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">64px / 4rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h3</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h4 class="h4">Heading 4</h4>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">48px / 3rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h4</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h5 class="h5">Heading 5</h5>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">36px / 2.25rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h5</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <h6 class="h6">Heading 6</h6>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">36px / 2.25rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.h6</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-lead">Text Lead</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">36px / 2.25rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-lead</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-xl">Text Large</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">24px / 1.5rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-xl</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-xl font-bold">Text Large Bold</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">24px / 1.5rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-xl .font-bold</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-base">Text Regular</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">20px / 1.25rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-base</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-base font-bold">Text Regular Bold</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">20px / 1.25rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-base .font-bold</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-sm">Text Small</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">16px / 1rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-sm</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-sm font-bold">Text Small Bold</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">16px / 1rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-sm .font-bold</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-xs">Text XS</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">14px / 0.875rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-xs</div>
</section>

<section class="flex justify-between items-center border-b border-secondary-800 py-5">
  <header>
    <p class="text-xs font-bold">Text XS Bold</p>
    <span class="bg-slate-100 rounded-full px-3 py-1 text-xs mt-4 inline-block text-slate-500">14px / 0.875rem</span>
  </header>
  <div class="text-mint-700 w-64 text-sm">.text-xs .font-bold</div>
</section>