<body class="flex flex-col justify-center items-center m-4 ">
  <section class="w-52 mb-2 rounded-xl border p-4 border-slate-600 text-center ">
    <p class="font-bold">Ordinal</p>
    <p class="ordinal">1st</p>
    <p>vs</p>
    <p>1st</p>
  </section>

  <section class="w-52 mb-2 rounded-xl border p-4 border-slate-600 text-center font-inter">
    <p class="font-bold">Slashed zero</p>
    <p class="slashed-zero">0</p>
    <p>vs</p>
    <p>0</p>
  </section>

  <section class="w-52 mb-2 rounded-xl border p-4 border-slate-600 text-center">
    <p class="font-bold">Align numbers</p>
    <p class="lining-nums font-source">
      1234567890
    </p>
    <p>vs</p>
    <p class="oldstyle-nums font-source">
      1234567890
    </p>
  </section>
  
  <section class="w-52 mb-2 rounded-xl border p-4 border-slate-600 text-center">
    <p class="font-bold">Proportional vs Tabular</p>
    <p class="proportional-nums">1212</p>
<p class="proportional-nums">9090</p>
    <p>vs</p>
    <p class="tabular-nums">1212</p>
<p class="tabular-nums">9090</p>
  </section>
  
  <section class="w-52 mb-2 rounded-xl border p-4 border-slate-600 text-center">
    <p class="font-bold">Fractions</p>
    <p class="diagonal-fractions">1/2 3/4 5/6</p>
    <p>vs</p>
    <p class="stacked-fractions font-source">1/2 3/4 5/6</p>
  </section>
</body>
.font-inter {
    font-family: 'Inter', sans-serif;
}
.font-source {
    font-family: Baskerville;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css
  3. https://fonts.googleapis.com/css?family=Source+Sans+Pro&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.