text-rotate is

A single <span> is all you need.

With HTML only

<span
  class="text-rotate"
  data-rotate='["Test","Just kidding"]' // data-rotate is mandatory and describes the strings to rotate through
  data-speed=".5" // data-speed is optional and defines the speed of typing
  data-period="2000"> // data-period is optional and sets the time to wait until deleting the text in milliseconds
</span>

With JS

new TextRotate(
  document.querySelector('#rotate'), // the span element to use
  ['text 1', 'text 2'], // array of strings to rotate through
  {
    speed: 2.0, // defaults to 1.0 (130ms - 200ms)
    period: 1000 // defaults to 2000
  }
);

Styling the cursor

.text-rotate > .cursor {
  display: inline-block;
  width: 30px;
  margin-left: 8px;
  border-bottom: 4px solid #888;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 0; }
  40% { opacity: 0; }
  50% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}