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 class="animatedbox">
              <span class="match"></span><span class="unmatch"></span>
          </div>

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

          <div class="animatedbox" id="last">
              <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;
        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;
                setTimeout(function() {
                    randomIndex = randomFromTo(0, arrstring.length - 1);
                  ...