JSFiddle - React, Tailwind, and code Playground

HTML

<div id="normal">
    normal
</div>
<div id="bold">
    bold
</div>
<div id="bolder">
    bolder
</div>
<div id="lighter">
    lighter
</div>
<div id="w100">
    100
</div>
<div id="w200">
    200
</div>
<div id="w300">
    300
</div>
<div id="w400">
    400
</div>
<div id="w500">
    500
</div>
<div id="w600">
    600
</div>
<div id="w700">
    700
</div>
<div id="w800">
    800
</div>
<div id="w900">
    900
</div>

CSS

#normal {
    font-weight: normal;
}
#bold {
    font-weight: bold;
}
#bolder {
    font-weight: bolder;
}
#lighter {
    font-weight: lighter;
}
#lighter {
    font-weight: lighter
}
#w100 {
    font-weight: 100;
}
#w200 {
    font-weight: 200;
}
#w300 {
    font-weight: 300;
}
#w400 {
    font-weight: 400;
}
#w500 {
    font-weight: 500;
}
#w600 {
    font-weight: 600;
}
#w700 {
    font-weight: 700;
}
#w800 {
    font-weight: 800;
}
#w900 {
    font-weight: 900;
}