JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p1">CSS Dictionary - normal</p>
<p class="p2">CSS Dictionary - bold</p>
<p class="p3">CSS Dictionary - bolder</p>
<p class="p4">CSS Dictionary - lighter</p>
<p class="p5">CSS Dictionary - 900</p>
<p class="p6">CSS Dictionary - 800</p>
<p class="p7">CSS Dictionary - 700</p>
<p class="p8">CSS Dictionary - 600</p>
<p class="p9">CSS Dictionary - 500</p>
<p class="p10">CSS Dictionary - 400</p>
<p class="p11">CSS Dictionary - 300</p>
<p class="p12">CSS Dictionary - 200</p>
<p class="p13">CSS Dictionary - 100</p>

CSS

.p1{
   font-weight: normal; 
}
.p2{
   font-weight: bold; 
}
.p3{
   font-weight: bolder; 
}
.p4{
   font-weight: lighter; 
}
.p5{
   font-weight: 900; 
}
.p6{
   font-weight: 800; 
}
.p7{
   font-weight: 700; 
}
.p8{
   font-weight: 600; 
}
.p9{
   font-weight: 500; 
}
.p10{
   font-weight: 400; 
}
.p11{
   font-weight: 300; 
}
.p12{
   font-weight: 200; 
}
.p13{
   font-weight: 100; 
}