JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>
<b><div id="five">Five b outside</div></b>
<strong><div id="six">Six strong outside</div></strong> 
<div id="seven"><b>Seven b inside</b></div>
<div id="eight">Eight</div>
<div id="nine"><strong>Nine strong inside</strong></div>

CSS

#one
{
    font-weight:bold;
}
#two
{
    font-weight:bolder;
}
#three
{
    font-weight:900;
}
#four
{
    font-weight:normal;
}
#eight
{
    font: black bold;
}
strong div, div strong
{
    font-weight:bold;
}

JavaScript

$('div').each(function(){
    var mybold = $(this).css('font-weight');
    $(this).append("<span class='ithas'>&nbsp;"+mybold+" </span>");
    if (mybold > 400)
    {
        $(this).append("<span class='ithas'> "+mybold+" Shows Bold</span>");
    }
    else
    {
        $(this).append("<span class='ithas'> "+mybold+" NOT bold</span>");
    };
});