JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<div class="tp-caption cmo-white-montserrat-36 tp-resizeme skrollable skrollable-after" id="slide-81-layer-7" data-x="center" data-hoffset="" data-y="center" data-voffset="20" data-width="['1200']" data-height="['auto']" data-transform_idle="o:1;" data-transform_in="y:50px;opacity:0;s:700;e:Power3.easeInOut;" data-transform_out="opacity:0;s:300;s:300;" data-start="2000" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 1200px; min-height: 0px; white-space: normal; max-width: 1200px; font-size: 36px; line-height: 50px; font-weight: 400; color: rgb(242, 242, 242); font-family: Montserrat; text-align: center; border-color: rgb(0, 0, 0); visibility: inherit; transition: none; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; max-height: none; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 50% 50% 0px;">
						Perfect Solution for <span class="cmo-typing" data-texts="['Businesses','Individuals','Professionals']" data-delay="2000" data-loop="true" style="transition: none; line-height: 50px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 400; font-size: 36px;">Ind</span><span class="typed-cursor" style="transition: none; line-height: 50px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-weight: 400; font-size: 36px;">|</span>
					</div>

CSS

.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

JavaScript

/**
 * TypedJs
 * https://github.com/mattboldt/typed.js/
 
 */
!function(t){"use strict";var s=function(s,e){this.el=t(s),this.options=t.extend({},t.fn.typed.defaults,e),this.isInput=this.el.is("input"),this.attr=this.options.attr,this.showCursor=this.isInput?!1:this.options.showCursor,this.elContent=this.attr?this.el.attr(this.attr):this.el.text(),this.contentType=this.options.contentType,this.typeSpeed=this.options.typeSpeed,this.startDelay=this.options.startDelay,this.backSpeed=this.options.backSpeed,this.backDelay=this.options.backDelay,this.strings=this.options.strings,this.strPos=0,this.arrayPos=0,this.stopNum=0,this.loop=this.options.loop,this.loopCount=this.options.loopCount,this.curLoop=0,this.stop=!1,this.cursorChar=this.options.cursorChar,this.shuffle=this.options.shuffle,this.sequence=[],this.build()};s.prototype={constructor:s,init:function(){var t=this;t.timeout=setTimeout(function(){for(var s=0;s<t.strings.length;++s)t.sequence[s]=s;t.shuffle&&(t.sequence=t.shuffleArray(t.sequence)),t.typewrite(t.strings[t.sequence[t.arrayPos]],t.strPos)},t.startDelay)},build:function(){this.showCursor===!0&&(this.cursor=t('<span class="typed-cursor">'+this.cursorChar+"</span>"),this.el.after(this.cursor)),this.init()},typewrite:function(t,s){if(this.stop!==!0){var e=Math.round(70*Math.random())+this.typeSpeed,o=this;o.timeout=setTimeout(function(){var e=0,r=t.substr(s);if("^"===r.charAt(0)){var i=1;/^\^\d+/.test(r)&&(r=/\d+/.exec(r)[0],i+=r.length,e=parseInt(r)),t=t.substring(0,s)+t.substring(s+i)}if("html"===o.contentType){var n=t.substr(s).charAt(0);if("<"===n||"&"===n){var...