JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <h1>Specialists in retirement income</h1>
</div>

<div class="test">
    <h1>Retirement income in Specialists</h1>
</div>

CSS

body { 
    background: #333333; 
}

.test { 
    width: 340px; 
    background: #FFFFFF; 
    margin: 50px; 
}

h1 {
    color: #fff;
    background: #41a293;
    display: inline;
    font: 30px/1.4 Arial, sans-serif;
    padding: 2px 4px; 
}


.subhead {
    padding: 2px 4px;
}

JavaScript

$("h1").each(function() 
    {
        var headerContent = $(this).text().split(' ');
        
        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
        }
        
        $(this).html(headerContent.join(' '));
    }
);