JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
            <div class="headerButton">
                <div class="headerButtonTop colorTwoBg">
                </div>
                <span class="headerButtonText colorTwoText fontHeader">ABOUT</span>
                <div class="headerButtonBottom colorTwoBg">
                </div>
            </div>
            
            <div class="headerButton">
                <div class="headerButtonTop colorTwoBg">
                </div>
                <span class="headerButtonText colorTwoText fontHeader">BLOG</span>
                <div class="headerButtonBottom colorTwoBg">
                </div>
            </div>
            
            <div class="headerButton">
                <div class="headerButtonTop colorTwoBg">
                </div>
                <span class="headerButtonText colorTwoText fontHeader">GAMES</span>
                <div class="headerButtonBottom colorTwoBg">
                </div>
            </div>
            
            <div class="headerButton">
                <div class="headerButtonTop colorTwoBg">
                </div>
                <span class="headerButtonText colorTwoText fontHeader">PROJECTS</span>
                <div class="headerButtonBottom colorTwoBg">
                </div>
            </div>
            
            <div class="headerButton">
                <div class="headerButtonTop colorTwoBg">
                </div>
                <span class="headerButtonText colorTwoText fontHeader">PORTFOLIO</span>
                <div class="headerButtonBottom colorTwoBg">
                </div>
            </div>
        </div>

CSS

*
{
    margin:0;
    padding:0;
}

#header
{
    width:100%;
    height:300px;
}

.headerButton
{
    float:left;
}

.headerButtonTop
{
    width:100%;
    height:15px;
}

.headerButtonText
{
    /*padding:0px 2px 0px 2px;*/
    display:inline-block;
}

.headerButtonBottom
{
    width:100%;
    height:15px;
}









.colorOneBg
{
    background-color:#FFFFFF;
}

.colorOneText
{
    color:#FFFFFF;
}

.colorTwoBg
{
    background-color:#000000;
}

.colorTwoText
{
    color:#000000;
}

.colorThreeBg
{
    background-color:#FF0000;
}

.colorThreeText
{
    color:#FF0000;
}

.fontHeader
{
    font-family: 'Righteous', sans-serif;
}

JavaScript

function getWidth()
{
    var a = 0;
    $(".headerButtonText").each(function(){
        a+= parseFloat($(this).css("width"));
    });
    return a;
}

    var increment = 10;
    var size = 1;
    var totalWidth = 0;
    //While we are still reducing the increment
    while(increment >= 0.001)
    {
        while(totalWidth < parseFloat($("#header").css("width")))
        {
            size+=increment;
            $(".headerButtonText").css("font-size",size);
            totalWidth = getWidth();
        }
        size-=increment;
        $(".headerButtonText").css("font-size",size);
        totalWidth = getWidth();
        increment*=0.1;
    }
    size-=increment;
    $(".headerButtonText").css("font-size",size);