JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<p id="sentence">
    We provide
    <span id="swap"></span> 
   for your business.
  </p>

CSS

p#sentence{

  text-align:center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size:3em;
}

#swap{
  height:3em;
  width:0;
  vertical-align:top;
}
#swap>span{
  position:absolute;
  color:chocolate;
}

JavaScript

$(function() { // DOM ready

  var txt = ['code', 'solutions', 'design', 'awesomeness'],
      n = txt.length,
      $swap = $('#swap'),
      $span,
      c = -1;

  // CREATE SPANS INSIDE SPAN
  for(var i=0; i<txt.length; i++) $swap.append($('<span />',{text:txt[i]}));
  // HIDE AND COLLECT THEM
  $span = $("span", $swap).hide(); 

  (function loop(){
    c = ++c % n;
    $swap.animate({width: $span.eq( c ).width() });
    $span.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop);
  }()); 

});