JSFiddle - React, Tailwind, and code Playground

by Vincent

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://rawgit.com/vwochnik/jquery-typing/master/dist/jquery.typing.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vwochnik/jquery-typing/master/dist/jquery.typing.min.css">
<div class="wrapper">
  <div class="container">
    <div class="content animation" id="typing"></div>
    <div class="content hidden" id="content">
      <h1 data-speed="120"><span class="col1">Hi!<span data-delay="1000"> </span></span><small data-speed="80">This is jQuery <span class="col2">Typing</span>!</small></h1>
      <p><strong>A jQuery plugin that can typewrite <span class="col2">HTML</span>.</strong></p>
      <p>Typing is a jQuery plugin that can write <span class="col3">whole parts of the DOM</span>.
      <br>It's really <span class="col3">easy to use</span> and has a set of options that allows <span class="col3">neat typing animations</span> to be built with <span class="col3">varying speed and delays</span>.</p>
    </div>
  </div>
</div>

SCSS

@import url(//fonts.googleapis.com/css?family=Inconsolata:400,700);

html, body, .wrapper {
  height: 100%;
}

body {
  background: #1D2F3F;
  font-family: 'Inconsolata';
  color: #d8d8d8;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .container {
    position: relative;
    width: 70%;
    
    .animation {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }
    
    .hidden {
      visibility: hidden;
    }
  }
}

.content {
  h1, p:first-child {
    text-align: center;
  }
  
  .col1 { color: #2995C0; }
  .col2 { color: #9A5098; }
  .col3 { color: #fdf6e3; }
}

JavaScript

$(function(){
  $("#typing").typing({
    sourceElement: $("#content")
  });
});