JSFiddle - React, Tailwind, and code Playground

HTML

<p class="text1">text 100</p>
<p class="text2">text 200</p>
<p class="text3">text 300</p>
<p class="text4">text 400</p>
<p class="text5">text 500</p>
<p class="text6">text 600</p>
<p class="text7">text 700</p>
<p class="text8">text 800</p>
<p class="text9">text 900</p>
<div class="text1">text 100</div>
<div class="text2">text 200</div>
<div class="text3">text 300</div>
<div class="text4">text 400</div>
<div class="text5">text 500</div>
<div class="text6">text 600</div>
<div class="text7">text 700</div>
<div class="text8">text 800</div>
<div class="text9">text 900</div>

CSS

div {
    font-family: "Arial Black";
}
div:after { content: ' (Arial Black)'; }
p {
    font-family: Arial;
    margin: 0;
}
p:after { content: ' (Arial)'; }
.text1 { font-weight: 100; }
.text2 { font-weight: 200; }
.text3 { font-weight: 300; }
.text4 { font-weight: 400; }
.text5 { font-weight: 500; }
.text6 { font-weight: 600; }
.text7 { font-weight: 700; }
.text8 { font-weight: 800; }
.text9 { font-weight: 900; }