JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<section class="cd-intro">
  <h1 class="cd-headline rotate-1">
    <span>My favourite food is</span>
    <span class="cd-words-wrapper" style="width: 128px;">
      <b class="is-visible">pizza</b>
      <b animationDelay="5000">sushi</b>
      <b>steak</b>
    </span>
  </h1>
</section>

CSS

*,
*::after,
*::before {
  box-sizing: border-box
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

html {
  font-size: 62.5%
}

body {
  font-size: 1.6rem;
  font-family: source sans pro, sans-serif;
  color: #aebcb9;
  background-color: #0d0d0d
}

a {
  text-decoration: none
}

.cd-title {
  position: relative;
  height: 160px;
  line-height: 160px;
  text-align: center
}

.cd-title h1 {
  font-size: 2.4rem;
  font-weight: 700
}

@media only screen and (min-width:1170px) {
  .cd-title {
    height: 200px;
    line-height: 200px
  }

  .cd-title h1 {
    font-size: 3rem
  }
}

.cd-filter,
.cd-intro {
  width: 90%;
  max-width: 768px;
  text-align: center
}

.cd-intro {
  margin: 4em auto 2em
}

@media only screen and (min-width:768px) {
  .cd-intro {
    margin: 5em auto 3em
  }
}

@media only screen and (min-width:1170px) {
  .cd-intro {
    margin: 6em auto 3em
  }
}

.cd-filter {
  margin: 0 auto;
  max-width: 600px;
  text-align: center
}

.cd-filter li {
  position: relative;
  display: inline-block;
  margin: .5em .4em
}

.cd-filter input {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0
}

.cd-filter input:checked+label {
  color: #0096a7;
  background: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06)
}

.cd-filter label {
  display: inline-block;
  padding: .6em .8em;
  background: #1a1a1a;
  color: #737373;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 5px rgba(0, 0, 0, .6);
  cursor: pointer;
  border-radius: 3px
}

.cd-headline {
  font-size: 3rem;
  line-height: 1.2
}

@media only screen and (min-width:768px) {
  .cd-headline {
    font-size: 4.4rem;
    font-weight: 300
  }
}

@media only screen and (min-width:1170px) {
  .cd-headline {
    font-size: 6rem
  }
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left
}

.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0
}

.cd-words-wrapper...

JavaScript

jQuery(document).ready(function($) {
  //set animation timing
  var animationDelay = 2500,
      animationDelay_default = 2500,
    //loading bar effect
    barAnimationDelay = 3800,
    barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
    //letters effect
    lettersDelay = 50,
    //type effect
    typeLettersDelay = 150,
    selectionDuration = 500,
    typeAnimationDelay = selectionDuration + 800,
    //clip effect 
    revealDuration = 600,
    revealAnimationDelay = 1500;

  initHeadline();


  function initHeadline() {
    //insert <i> element for each letter of a changing word
    singleLetters($('.cd-headline.letters').find('b'));
    //initialise headline animation
    animateHeadline($('.cd-headline'));
  }

  function singleLetters($words) {
    $words.each(function() {
      var word = $(this),
        letters = word.text().split(''),
        selected = word.hasClass('is-visible');
      for (i in letters) {
        if (word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
        letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>' : '<i>' + letters[i] + '</i>';
      }
      var newLetters = letters.join('');
      word.html(newLetters).css('opacity', 1);
    });
  }

  function animateHeadline($headlines) {


    var duration = animationDelay;
    $headlines.each(function() {
      var headline = $(this);


      if (headline.hasClass('loading-bar')) {
        duration = barAnimationDelay;
        setTimeout(function() {
          headline.find('.cd-words-wrapper').addClass('is-loading')
        }, barWaiting);
      } else if (headline.hasClass('clip')) {
        var spanWrapper = headline.find('.cd-words-wrapper'),
          newWidth = spanWrapper.width() + 10
        spanWrapper.css('width', newWidth);
      } else if (!headline.hasClass('type')) {
        //assign to .cd-words-wrapper the width of its longest word
        var...