JSFiddle - React, Tailwind, and code Playground

by Dejan Munjiza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script>
<div class="page-title"><span>No More</span><span class="type-it"></span></div>
<div class="page-subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum</div>

CSS

.page-title {
  text-align: left;
  width: 100%;
  float: left;
  color: white;
  font-size: 40px;
  font-weight: bold;
  font-family: Arial;
}

.page-subtitle {
  text-align: center;
  width: 100%;
  float: left;
  color: white;
  font-size: 20px;
  margin-top: 20px;
  font-weight: bold;
  font-family: Arial;
}

body {
  background: #403557;
}

JavaScript

jQuery(function() {
    $('.type-it').typeIt({
        speed: 100,
        lifeLike: false,
        autoStart: false
      })
      .tiSettings({
        speed: 100
      })
      .tiType(' Multiple Browsers')
      .tiPause(1500)
      .tiDelete(8)
      .tiPause(300)
      .tiSettings({
        speed: 100
      })
      .tiType('Profiles')
      .tiPause(1500)
      .tiDelete(17)
      .tiPause(300)
      .tiSettings({
        speed: 100
      })
      .tiType('Logging In & Out')
      .tiSettings({
        loop: true
      })
      .tiSettings({
        loopDelay: 1500
      });
  });