JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<div id="app"></div>
CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
#app {
font-size: 70px;
line-height: 78px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
strong {
font-weight: 700;
}
JavaScript
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true,
delay: 75,
});
typewriter
.pauseFor(2500)
.typeString('A simple yet powerful native javascript')
.pauseFor(300)
.deleteChars(10)
.typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
.typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
.pauseFor(1000)
.start();