JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

<div class="font-size-16">
    <h3>Header 3 inside parent 16px</h3>
</div>

<div class="font-size-14">
    <h3>Header 3 inside parent 14px</h3>
</div>

<div class="font-size-12">
    <h3>Header 3 inside parent 12px</h3>
</div>

<div class="font-size-10">
    <h3>Header 3 inside parent 10px</h3>
</div>

CSS

.font-size-16 {
    font-size: 16px;
    font-style: font-lighter;
}

.font-size-14 {
    font-size: 14x;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-10 {
    font-size: 10px;
}