JSFiddle - React, Tailwind, and code Playground

HTML

<span class='custom-underline-1'>Custom Underline 1</span><br />
<span class='custom-underline-2'>Custom Underline 2</span><br /><br />
<span>How normal underline look like for a big bold font:</span><br />
<span class='normal-underline'>Normal Underline</span><br /><br />
<span>How the underline look like if made with border-bottom:</span><br />
<span class='border-bottom-underline'>Border Underline</span><br/><br />
<span>But you can use highly customizable solution with box-shadow:</span><br />
<span class='custom-underline-3'>Custom Underline</span>

CSS

.custom-underline-1{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

.custom-underline-2{
    box-shadow: inset 0 -2px 0 white, inset 0 -3px 0 black
}

.normal-underline{
    font-weight:bold;
    font-size:200%;
    text-decoration:underline;   
}

.custom-underline-3{
    font-size:200%;
    font-weight:bold;
    box-shadow: inset 0 -2px 0 white, inset 0 -3px 0 black
}

.border-bottom-underline{
    font-size:200%;
    font-weight:bold;
    border-bottom:1px solid black;
    
}