JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p1">caption</p>
<p class="p2">icon</p>
<p class="p3">menu</p>
<p class="p4">message-box</p>
<p class="p5">small-caption</p>
<p class="p6">status-bar</p>

CSS

.pl {
    font: caption;
}
.p2 {
    font: icon;
}
.p3 {
    font: menu;
}
.p4 {
    font: message-box;
}
.p5 {
    font: small-caption;
}
.p6 {
    font: status-bar;
}