JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="wrapper">
  <h1 class="hello">Hello Everyone Let's Learn javascript</h1>
</div>
//https://stackoverflow.com/q/48717340/3377049

CSS

html, body {
  margin: 0;
  background-color: hsla(0, 0%, 90%, 1);
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.hello {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}
.hColor { 
  display: flex;
  justify-content: center;
  width: 25%;
  padding: 0 30px;
  box-sizing: border-box;
  transition: all 0.2s linear;
}
.hColor.n0 { color: hsl(0, 51.2%, 49.8%); }
.hColor.n1 { color: hsl(190.7, 93.7%, 43.5%); }
.hColor.n2 { color: hsl(36, 70.9%, 51.6%); }
.hColor.n3 { color: hsl(286, 71.8%, 44.5%); }
.hColor.n4 { width: 100%; font-variant: small-caps; color: hsl(107.9, 83.6%, 45.5%); }
.hColor.n4.grow { font-size: 11vw; }

JavaScript

var hello = $('.hello').text();
$('.hello').empty();
var helloArray = hello.split(' ');
var delays = [400, 500, 1500, 1600, 1900];
$(helloArray).each(function(i) {
  var pseudoThis = this;
  setTimeout(function() {
    wordAndWrapper = '<span class="hColor n'+i+'">'+pseudoThis+'</span> ';
    $('.hello').append(wordAndWrapper);
  }, delays[i]);
  if (i === 4) {
    setTimeout(function() {
      $('.n4').addClass('grow');
    }, 1950);
  };
})