JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="text">
    <li id="textBody">Suffering is not a result of physical pain alone. It can be compounded by changes in one's life, and changes in the self. <em>We understand, and we can help.</em></li>
    <li id="textFamily">Aggressive assessment of physical symptoms &amp; pain in the body are key to support <em>the best possible quality of life</em>.</li>
    <li id="textFunction">Chronic pain &amp; illness may affect your role in your family. We work with you and your family as you confront those changes.</li>
    <li id="textPsyche">Chronic pain and illness make even everyday activities challenging. We will help you maintain independence and physical function.</li>
    <li id="textSuffering">Changes in the physical body mean changes in the self. We will provide support as you navigate those changes in the psyche.</li>
</ul>
<ul id="vivid_buttons">
    <li><a href="#" id="buttonBody">BODY</a></li>
    <li><a href="#" id="buttonFamily">FAMILY</a></li>
    <li><a href="#" id="buttonFunction">FUNCTION</a></li>
    <li><a href="#" id="buttonPsyche">PSYCHE</a></li>
    <li><a href="#" id="buttonSuffering">SUFFERING</a></li>
</ul>

CSS

ul#text { position: relative; margin-bottom: 40px; height: 40px; }
ul#text li { position: absolute; display: none; }
.active { font-weight: bold; }

JavaScript

var $sentence_set = $('ul#text li');
var $link_set = $('ul#vivid_buttons li');

var highlight = function(which) {
    var el = $sentence_set.eq(which - 1);
    var position = el.prevAll('li').length;
    $link_set.removeClass('active').eq(position).addClass('active');
    $sentence_set.eq(position).siblings().fadeOut().end().fadeIn();
}

var loopcount = 0;
var repeater = setInterval(function() {
    var theList = $('#text > li');
    // assume both lists are the same length
    highlight(++loopcount % $sentence_set.length);
}, 4000);