JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>3D Animation</title>
    <script src="Script/jquery-3.3.1.min.js"></script>
    <script src="Script/babylon.js"></script>
    <script src="Script/babylonjs.loaders.min.js"></script>
    <script src="Script/pep.js"></script>
    <script type="text/javascript" src="Script/Animate.js"></script>
    <meta name="FrontEnd" content="3D Animation">
    <meta id="myMeta" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>

  <body>
    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <div class="tda_container">
      <div class="tda_footer">
        <div class="tda_playBtn">
          <img class="tda_pauseImg" src="Images/PlayButton.png">
        </div>
        <div class="tda_slider_container">
          <input class="tda_slider" type="range" min="0" max="9.83" step="any" value="0" oninput="SetAnimationTime(this.value)">
        </div>
        <div class="tda_drop-up-btn">
          <img class="tda_drop-up-btn-img" src="Images/Speed_Button.png" alt="CloseList">
          <div class="tda_drop-up-content">
            <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">2x</div>
            <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">1.5x</div>
            <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">1x</div>
            <div class="tda_speed_option" onclick="ChangeAnimSpeed(this.innerHTML)">0.5x</div>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

CSS

html{width: 100%;height: 100%; padding: 0;margin: 0;overflow: hidden;}
       body {width: 100%;height: 100%;margin: 0; padding: 0;background: url("Images/bg_learn.jpg") center; background-size: cover; font-family: Trebuchet MS;overflow: hidden;}
        /* Footer Container Code starts */
        .tda_container{width: 100%;height: 100%;}
        /* Footer Container Code ends */

        /* Footer Code Starts */
        .tda_footer{display:inline-block;position: relative;bottom: 15%;height: 8%;width: 100%; background: url("Images/sliderBG.png"); background-size: contain;background-repeat: no-repeat;}
        /* Footer Code Ends */

        /* Play/Pause Button Code Starts */
        .tda_playBtn{width: 5%; pointer-events: all;cursor: pointer;margin-left: 10px; float: left;}
        .tda_playBtn img{width: 100%;height: auto;}
        /* Play/Pause Button Code Ends */

        /* Drop up Code starts */
        .tda_drop-up-btn{float: left;cursor: pointer;pointer-events: all;}
        .tda_drop-up-btn{width: 5%;position: relative;}
        .tda_drop-up-btn img{width: 100%;}
        .tda_drop-up-content{display: none;  position: absolute;background-color: white; width: 55px; left: 5px; text-align: center;}
        .tda_drop-up-content.active{display: block; top: -120px;background-color: white; width: 55px; left: 7px; text-align: center;}
        .tda_speed_option{ border-style: outset;border-color: azure;padding: 2px 2px;}
        .tda_speed_option:hover{color: rgb(97, 11, 105);}

        /* Drop up Code ends */

        /* Slider code starts */
        .tda_slider_container{float: left;}
        .tda_slider{width: 60%;}
        /* Slider code ends */

        /* Babylon Code starts */
        
        #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

        /* Babylon Code ends */

JavaScript

$(document).ready(function() {

        if (CurrentAnimation != null)
          if (CurrentAnimation.isPlaying()) {
            console.log("anim Playing");
          }
        else
          console.log("anim stopped");

        $('.tda_container .tda_drop-up-btn').on('click', function() {
          $('.tda_drop-up-content').toggleClass('active');
        });

        $('.tda_container .tda_playBtn').on('click', function() {
          $('.tda_playBtn').toggleClass('playing');
          if ($('.tda_playBtn').hasClass('playing')) {
            CurrentAnimation.restart();
            $('.tda_pauseImg').attr('src', 'Images/PauseButton.png');
            $('.tda_slider').attr('value', CurrentAnimation.masterFrame);
            if (m_bStartMovingSlider == false) {
              moveSliderTimeout = window.setInterval(MoveSlider, animationTime[0]);
              m_bStartMovingSlider = true;
            }
          } else {
            $('.tda_pauseImg').attr('src', 'Images/PlayButton.png');
            CurrentAnimation.pause();
          }
        });

      });

      function MoveSlider() {
        if (CurrentAnimation._animatables[0].masterFrame < animationTime[0] - 0.1)
          $('.tda_slider').attr('value', CurrentAnimation._animatables[0].masterFrame);
        else
          clearTimeout(moveSliderTimeout);
      }

      function SetAnimationTime(animTime) {
        console.log(" animation time set : " + animTime);
        CurrentAnimation._animatables[0].masterFrame = animTime;
      }


      function ChangeAnimSpeed(speedValSelected) {
        switch (speedValSelected) {
          case '0.5x':
            CurrentAnimation.speedRatio = 0.5;
            console.log("speed : " + CurrentAnimation.speedRatio);
            $('.tda_drop-up-btn-img').attr('src', 'Images/btn_0.5x.png');
            break;

          case '1x':
            CurrentAnimation.speedRatio = 1;
            console.log("speed : " + CurrentAnimation.speedRatio);
           ...