JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<script src="https://unpkg.com/[email protected]/dist/core.js"></script>
<span>We <div id="app"></div></span>

CSS

#app { display: inline;}

span {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
}

.Typewriter__cursor {
  opacity: .5;
}

JavaScript

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('challenge')
    .pauseFor(2500)
    .deleteAll()
    .pauseFor(250)
		.typeString('care')
    .pauseFor(2500)
    .deleteAll()
    .pauseFor(250)
    .typeString('build')
    .pauseFor(2500)
    .deleteAll()
    .pauseFor(250)
		.typeString('dare')
    .deleteAll()
    .pauseFor(250)
    .start();