JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="item event_hover_self">
        <h3>Наведение на подключенный объект, скорость 60fps (Default)</h3>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
    </div>
    <hr>
    <div class="item event_click_self">
        <h3>Клик на подключенный объект, скорость 30fps</h3>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
    </div>
    <hr>
    <div class="item event_hover_btn">
        <h3>Наведение на заданный в настройках объект, скорость 45fps</h3>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <div class="ttt" data-ttt-new="Наведен">Не наведен</div>
        <br>        
        <button>Наведите сюда</button>
    </div>
    <hr>
    <div class="item event_click_btn">
        <h3>Клик на заданный в настройках объект, скорость 15fps</h3>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div class="ttt" data-ttt-new="Нажат">Не нажат</div>
        <div...

CSS

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}
.item {
    font-size: 0.01%;
    text-align: center;
}
.ttt {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 20px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
    text-align: center;
    cursor: pointer;
}
button {
    font-size: 20px;
}

JavaScript

(function ($) {
/*
 * Typing Text Transform v1.0
 * Created by Yaroslav Galinskyy
 * (c) 2014 Digital Agency Contorra | http://contorra.ru/
 */
(function(a){a.fn.ttt=function(c){var j=a.extend({btn:a(this),event:"mouseenter mouseleave",fps:60},c);var d="abcdefghijklmnopqrstuvwxyz";var e="ABCDEFGHIJKLMNOPQRSTUVWXYZ";var b="абвгдеёжзийклмнопрстуфхцчшщъыьэюя";var i="АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ";var h="0123456789";var g=",.?/\\()![]{}*&^%$# -_@№+=%;:`\"'";var f=a(this);f.each(function(){a(this).data("ttt-current",a(this).text())});a(j.btn).on(j.event,function(){var k="";if(a(this).data("ttt-new")){k=a(this)}else{k=f}function l(){var m=k.data("ttt-current");var r=k.data("ttt-new");var n=m.split("");var q=r.split("");var o=0;k.data("ttt-new",m).data("ttt-current",r);n.length=q.length;a.each(q,function(u){function s(){var x=a.inArray(n[u],t);var w=a.inArray(q[u],t);if(x==-1){x=Math.floor(Math.random()*(t.length-0))+0}var v=setInterval(function(){n[u]=t[x];k.text(n.join(""));if(x>w&&x-w<t.length/2||x<w&&x-w<t.length/2*-1){if(t[x]==q[u]){clearInterval(v);o=o+1;if(o==q.length){p()}}else{if(x==0){x=t.length-1}else{x=x-1}}}else{if(t[x]==q[u]){clearInterval(v);o=o+1;if(o==q.length){p()}}else{if(x==t.length){x=0}else{x=x+1}}}},1000/j.fps)}var t="";if(a.inArray(q[u],d)>-1){t=d;s()}else{if(a.inArray(q[u],e)>-1){t=e;s()}else{if(a.inArray(q[u],b)>-1){t=b;s()}else{if(a.inArray(q[u],i)>-1){t=i;s()}else{if(a.inArray(q[u],h)>-1){t=h;s()}else{if(a.inArray(q[u],g)>-1){t=g;s()}}}}}}});function p(){if(k.text()==k.data("ttt-new")){k.data("ttt-new",m).data("ttt-current",r);l()}}}l()})}})(jQuery);
})(jQuery);

(function ($) {
    $(document).ready(function() {
        //Call the function and set the options
        $('.event_hover_self .ttt').ttt();

        $('.event_click_self .ttt').ttt({
            'event':'click',
            'fps':30
        });

        $('.event_hover_btn .ttt').ttt({
            'btn':'.event_hover_btn button',
            'fps':45
        });

       ...