JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ui-widget-header">This is the font inside ui-widget-header</div>
<br/>
<div class="ui-widget-content">This is the font inside ui-widget-content</div>
<br/>
<div class="ui-widget-header">
    <div class="ui-widget-content">
        This is ui-widget-content INSIDE ui-widget-header. It takes the font of <u>ui-widget-content</u>
    </div>
</div>
<br/>
<div class="ui-widget-header">
    <div class="ui-widget-content">
        This is ui-widget-content INSIDE ui-widget-header. It takes the font of <b>ui-widget-content</b>...
        <br/>
        <br/>
        But hyperlinks take on the font style of the ui-widget-header ==><a href="#">I am invisible</a><==
    </div>
</div>

CSS

.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }