JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toolbar">
          <div id="boxscore">
            <span>Счет:</span>&nbsp;<span id="score">0</span>
          </div>
          <div id="boxcontrol">
            <a href="" id="btnplay">Играть</a>
          </div>
          <div class="clear">
              Нажмите "Играть" для запуска игры,
              печатайте текст в голубом прямоугольнике
          </div>
      </div>

<div id="container">
  <div class="animatedbox">
      <span class="match"></span><span class="unmatch"></span>
  </div>
  <div class="animatedbox">
      <span class="match"></span><span class="unmatch"></span>
  </div>
</div>

CSS

* {
        font-family: Arial;
    }
    #container {
        background:#e6e6e6;
        width:300px;
        height:230px;
        margin:0 auto;
        -webkit-border-radius:5%;
        -moz-border-radius:5%;
        border-radius:5%;
        padding:20px 0;
    }
    .animatedbox {
        background:#f2d2b2;
        position:absolute;
        padding:8px 20px 12px 15px;
        font-size:36px;
        color:#ffffff;
        -webkit-border-radius:0.5em 2.5em 2.5em 0.5em;
        -moz-border-radius: 0.5em 2.5em 2.5em 0.5em;
        border-radius: 0.5em 2.5em 2.5em 0.5em;
        left:500px;
        letter-spacing: 3px;
        display: none;
    }
    .match {
        color: #000000;
    }
    .current {
        background: #0099cc;
    }
    #toolbar {
        background: #ff0000;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        width:300px;
        padding:10px 0 10px 0;
        margin:0 auto;
        text-align: center;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    #boxscore {
        float: left;
        font-size: 22px;
        margin-left: 15px;
        color: #ffffff;
    }
    #score {
        font-weight: bold;
        font-size: 24px;
        padding: 0 3px;
    }
    #boxcontrol {
        float: right;
        margin-right: 15px;
    }
    #boxcontrol a {
        font-size: 22px;
        color: #ffffff;
    }
    .clear {
        margin-top: 5px;
        font-size: 11px;
        font-weight: bold;
        color: #ffffff;
        clear: both;
    }
    #main {
        background: #0099cc;
        margin-top: 0;
        padding: 2px 0 4px 0;
        text-align: center;
    }
    #main a {
        color: #ffffff;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        font-family: Arial;
    }
    #main a:hover {
        text-decoration: underline;
    }
    body {
        margin: 0;
        padding: 0;
    }

JavaScript

function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    }

    var arrstring = new Array("человек", "обои", "фото", "рыба", "кот", "жир", "пиво", "поле", "семья", "блог",  "поиск", "закладка", "вол", "кит", "сеть", "список", "страница", "меню", "мобильный", "кнопка", "элемент", "выбор", "колбаса", "сыр", "мясо", "вино", "рубль", "валюта", "счет", "доллар", "президент");
   var score = 0;

   $(document).ready(function() {

       var children = $("#container").children();
       var child = $("#container div:first-child");

       var currentEl;
       var currentElPress;

       var win_width = $(window).width();
       var text_move_px = 500;
       var box_left = (win_width / 2) - (text_move_px / 2);

       var playGame;
       var stop;
       
       $(".animatedbox").css("left", box_left+"px");

       $("#btnplay").click(function() {

           if ($(this).text() == "Играть") {
               startPlay();
               playGame = setInterval(startPlay, 23000);
               $(this).text("Закончить");
           } else if ($(this).text() == "Закончить") {
               stop = true;
               if ($("#container").find(".current").length == 0) {
                 $(this).text("Играть");
               } else {
                 $(this).text("Подождите...");
               }
               clearInterval(playGame);
           }
           return false;
       });

       var con_height = $("#container").height();
       var con_pos = $("#container").position();
       var min_top = con_pos.top;

       // 56 = отступ анимированного прмяоугольника сверху и снизу + размер шрифта
       var max_top = min_top + con_height - 56;

       function startPlay() {

           child = $("#container div:first-child");
           child.addClass("current");
           currentEl = $(".current");
           
           for (i=0; i<children.length; i++) {
               var delaytime = i * 3500;
              ...