JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<div class="type-writer">
  <span class='letter'>S</span>
  <span class='letter'>e</span>
  <span class='letter'>a</span>
  <span class='letter'>n</span>
  <span class='letter'>W</span>
  <span class='letter'>e</span>
  <span class='letter'>s</span>
  <span class='letter'>s</span>
  <span class='letter'>e</span>
  <span class='letter'>l</span>
  <span class='letter'>l</span>
</div>

CSS

.type-writer .letter {
  margin-left: 0px;
  margin-right: 0px;
  padding: 0px 0px 0px 0px;
  border:1px solid grey;
}

JavaScript

$(".type-writer .letter").hide().each(function(index) {
      var duration = 150;
      $(this).delay(duration * index).fadeIn(duration);
    });