JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="container"> 
    <h1 id="rotatingtext">Talk to a 
        <span class="show cycle">Lawyer</span> 
        <span class="cycle">Vetenarian</span> 
        <span class="cycle">Plumber</span>
        <span class="suffix">&nbsp;now</span>
    </h1>
</div>

CSS

body {
    color: #666666;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.6em;
    text-shadow: 0 0 0 transparent, 0 0 0 transparent;
}

h1 {
    font-family: Arial;
    font-size: 3.56em;
    font-weight: 500;
    line-height: 1.3em;
    text-shadow: 0 0 0 transparent, 0 0 1px rgba(0, 0, 0, 0.4);
}

#rotatingtext span.cycle { display:none}

JavaScript

$(document).ready(function() {
    $("#rotatingtext span.show").show();

    $(window).resize(function() {
        $(".suffix").css({
            "display": "inline",
            "position": "absolute",
            "left": $(".show").width() + $(".show").position().left
        });
    }).resize();
    setInterval(slideh1, 3000);
});

function slideh1() {
    var current = $('#rotatingtext .show');
    var next = current.next(".cycle").length ? current.next(".cycle") : current.parent().children('.cycle:first');
    current.hide().removeClass('show');
    next.css("visibility", "hidden").show().addClass('show');
    $(".suffix").animate({
        "left": next.width() + next.position().left
    }, 400, function() {
        next.css("visibility", "").hide().fadeIn(400);
    });
}