JSFiddle - React, Tailwind, and code Playground

by mattboldt

HTML

<link rel="stylesheet" href="https://rawgit.com/mattboldt/typed.js/master/assets/demos.css">
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<div class="wrap">
  <h1>Typed.js</h1>

  <div class="type-wrap">
    <span id="typed" style="white-space:pre;"></span>
  </div>
  <button class="toggle">Toggle</button>
  <button class="start">Start</button>
  <button class="stop">Stop</button>
  <button class="reset">Reset</button>
  <button class="destroy">Destroy</button>

</div>

CSS

/* Adding CSS manually is only necessary in JSFiddle,
   where CSS can't be inserted into the <head> */
.typed-cursor{
  opacity: 1;
  animation: typedjsBlink 0.7s infinite;
  -webkit-animation: typedjsBlink 0.7s infinite;
  animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink{
  50% { opacity: 0.0; }
}
@-webkit-keyframes typedjsBlink{
  0% { opacity: 1; }
  50% { opacity: 0.0; }
  100% { opacity: 1; }
}
.typed-fade-out{
  opacity: 0;
  transition: opacity .25s;
  -webkit-animation: 0;
  animation: 0;
}

JavaScript

var typed = new Typed("#typed", {
  strings: ['Some <i>strings</i> with', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'],
});

document.querySelector('.toggle').addEventListener('click', function() {
  typed.toggle();
});
document.querySelector('.stop').addEventListener('click', function() {
  typed.stop();
});
document.querySelector('.start').addEventListener('click', function() {
  typed.start();
});
document.querySelector('.reset').addEventListener('click', function() {
  typed.reset();
});
document.querySelector('.destroy').addEventListener('click', function() {
  typed.destroy();
});