JSFiddle - React, Tailwind, and code Playground

HTML

<h1>An h1 heading example (-apple-system-headline)</h1>
<p>Utrum luptatum refero. Vel praemitto vero consequat enim neque veniam diam immitto mara quae. Ex acsi sit. Diam comis multo ut.Obruo premo valde in consectetuer nibh diam nobis quidem nimis. Eu capio hendrerit pala jus luctus oppeto suscipere turpis tristique reprobo.</p>
<h2>An h2 heading example (-apple-system-headline)</h2>
<p>Te tum esca iriure wisi. Verto inhibeo gilvus. Si ex typicus vero. Accumsan nisl delenit importunus feugiat et odio adsum damnum jumentum. Dolore saluto gilvus sed gilvus duis ut quod. Capto tum regula sino lucidus similis olim vulpes autem.</p>
<h3>An h3 heading example (-apple-system-headline)</h3>
<p>Quod sit utrum tation. Humo praemitto quia illum quidem. In esca exerci eros validus. Qui oppeto scisco usitas macto jumentum fere.</p>
<h4>An h4 heading example (-apple-system-subheadline)</h4>
<h5>An h5 heading example (-apple-system-subheadline)</h5>
<h6>An h6 heading example (-apple-system-subheadline)</h6>
<h2>Caption styles</h2>
<p class="caption1">This is an example of caption1.</p>
<p class="caption2">Here's a caption2 being used.</p>
<p class="short-caption1">A &ldquo;short&rdquo; caption style exemplified here.</p>

<h2>Footnote styles</h2>
<p class="footnote">This is an example of footnote.</p>
<p class="short-footnote">An example of short-footnote</p>

<h2>Short body, followed by default body</h2>
<p class="short-body">Utrum luptatum refero. Vel praemitto vero consequat enim neque veniam diam immitto mara quae. Ex acsi sit. Diam comis multo ut.Obruo premo valde in consectetuer nibh diam nobis quidem nimis. Eu capio hendrerit pala jus luctus oppeto suscipere turpis tristique reprobo.</p>
<p>Caecus ingenium duis. Secundum caecus a ullamcorper qui saluto paratus iustum. Ibidem voco comis suscipit proprius praesent eros nunc. Delenit in minim ratis sed sit pneum amet euismod suscipit exputo. Valetudo rusticus humo persto voco elit immitto pala in. Ad nonummy molior...

CSS

body {
    font-family: -apple-system-body;
}
p {
    font-family: -apple-system;
}
h1, h2, h3 {
    font-family: -apple-system-headline;
}
h4, h5, h6 {
    font-family: -apple-system-subheadline;
}
.caption1 {
    font-family: -apple-system-caption1;
}
.caption2 {
    font-family: -apple-system-caption2;
}
.footnote {
    font-family: -apple-system-footnote;
}
.short-body {
    font-family: -apple-system-short-body;
}
.short-headline {
    font-family: -apple-system-short-headline;
}
.short-subheadline {
    font-family: -apple-system-short-subheadline;
}
.short-caption1 {
    font-family: -apple-system-short-caption1;
}
.short-footnote {
    font-family: -apple-system-short-footnote;
}
.tall-body {
    font-family: -apple-system-tall-body;
}