JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<h1>REDUCE RELAPSE RISK</h1>

SCSS

@charCount = 19;

body {
  font-family: 'Open Sans', sans-serif;
  background: 
}

h1 {
  font-weight: bold;
  font-size: 8vw;
}

h1 span {
  animation: fadeUp;
}

h1 span:nth-child(2) {
  color: #F00;
}

@for $i from 1 through $charCount {
  h1 span:nth-child(#{$i}) {
    animation-delay: #{100 * $i};
  }
}

@keyframes example {
  from { 
    transform: translateY(0.5rem); 
    opacity: 0;
   }
  to { 
    transform: translateY(0rem);
    opacity: 1;
   }
}

JavaScript

$(function() {
	var text = $('h1').text();
  
  $('h1').html(function() {
  	var html = "";
		for(var i = 0; i < text.length; i++) {
			html += '<span>' + text.charAt(i) + '</span>';
    }
    return html;
  });
  console.log(text.length);
})