<div id="text"></div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; 
}

#text {
   position: relative;
   color: #333;
   font-size: 50px;
   font-family: "Courier New", Courier, monospace;
   letter-spacing: 5px;
   text-shadow: 2px 2px rgba(0,0,0,0.1);   
}
 



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

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

typewriter.typeString('Hello!')
    .pauseFor(2500)
    .deleteAll()
    .typeString('How are you today?')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Have a nice day :)')
    .pauseFor(2500)
    .start();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js