JSFiddle - React, Tailwind, and code Playground

HTML

<main id="main">
    <div id="canvas">
      <svg version="1.1" viewBox="0 0 150 150" id="logo-p02" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css">
          #logo-p02_pink-floor{ fill:#D44ED3; }
          #logo-p02_outer-white-floor{ fill:#FFFFFF; }
          #logo-p02_green-floor{ fill:#5DC778; }
          #logo-p02_inner-white-floor{ fill:#FFFFFF; }
          #logo-p02_0,
          #logo-p02_2{ fill:#000000; }
        </style>
        <circle id="logo-p02_pink-floor" cx="75" cy="75" r="75" />
        <circle id="logo-p02_outer-white-floor" cx="75" cy="75" r="72.07" />
        <circle id="logo-p02_green-floor" cx="75" cy="75" r="69.141" />
        <circle id="logo-p02_inner-white-floor" cx="75" cy="75" r="66.211" />
        <path id="logo-p02_0" aria-label="0" d="m36.991 106.87q-4.7249 0-8.6098-1.785-3.7799-1.89-6.5098-5.1449-2.6249-3.3599-4.0949-7.8748t-1.47-9.9747q0-8.0848 2.8349-15.12 2.8349-7.1398 7.5598-12.39 4.8299-5.3548 11.025-8.3998t12.915-3.0449q4.7249 0 8.5048 1.8899 3.8849 1.7849 6.5098 5.1449 2.7299 3.2549 4.1999 7.8748 1.47 4.5149 1.47 9.9747 0 8.0848-2.9399 15.225-2.8349 7.0348-7.6648 12.285-4.7249 5.2498-10.92 8.2948-6.1948 3.0449-12.81 3.0449zm3.8849-18.269q1.8899 0 3.6749-1.47 1.7849-1.575 3.1499-4.0949 1.47-2.5199 2.3099-5.8798t0.83998-7.0348q0-3.8849-1.05-6.2998t-3.0449-2.4149q-2.0999 0-3.9899 1.575-1.7849 1.575-3.2549 4.1999-1.365 2.5199-2.2049 5.8798t-0.83998 6.9298q0 3.8849 1.155 6.2998 1.155 2.3099 3.2549 2.3099z"/>
        <path id="logo-p02_2" aria-label="2" d="m71.997 105.81q1.05-5.2498 2.7299-9.2397 1.68-3.9899 4.0949-7.1398 2.5199-3.2549 5.8798-5.7748 3.4649-2.5199 8.0848-4.8299 6.2998-3.1499 9.8697-5.0399 3.6749-1.8899 5.4598-3.1499 1.89-1.26 2.3099-2.2049 0.52499-1.05 0.52499-2.4149 0-3.9899-4.5149-3.9899-3.0449 0-6.2998 1.7849-3.1499 1.7849-7.3498 5.7748l-9.4497-14.805q2.5199-2.2049 5.9848-3.9899 3.4649-1.8899 7.3498-3.1499 3.9899-1.365 8.2948-2.0999t8.6098-0.73498q10.08 0 15.12 3.9899 5.0399 3.9899 5.0399...

CSS

*{
  margin:0;
  padding:0;
}
html,
body,
#canvas{
  height:100%;
}
.animate{
  cursor:none;
}
button{
  background:#FFFFFF;
  border:1px solid #CCCCCC;
  padding:0.2em 0.4em 0.1em 0.4em;
}
button:hover{
  cursor:pointer;
  border-color:#666666;
}
main{
  height:100%;
  width:100%;
}
body.blue-screen main{
  background:#3973FF;
}
#canvas{
  width:30%;
  margin:0 auto;
  display:flex;
  align-items:center;
}
.actions{
  position:fixed;
  height:40px;
  width:100%;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity 150ms ease;
}
.animate .actions{
  opacity:0;
  pointer-events:none;
}
.actions > *{
  margin:0.2em;
}
/**
 * Animation Logo player_two
 */
#logo-p02{
}
.animate #canvas{
  animation-name:center-to-corner;
  animation-iteration-count:1;
  animation-delay:1.5s;
  animation-duration:0.35s;
  animation-timing-function:ease;
  animation-fill-mode:forwards;
  transform-origin:center;
  transform-box: fill-box;
  transition:translate3d(0, 0, 0) 0.75s;
}
.animate #logo-p02{
  animation-name:rotate-center-move-ltc;
  animation-iteration-count:1;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-fill-mode: none;
  transform-origin:center;
  transform-box: fill-box;
  transition:transform 0.75s;
}
.animate #logo-p02_0,
.animate #logo-p02_2{
  animation-name:spring, blue-screen;
  animation-iteration-count:5, 1;
  animation-timing-function: ease, linear;
  animation-duration:0.75s;
  transform-origin:center;
  transform-box: fill-box;
}
.animate #logo-p02_0{
  animation-delay:0.75s, 0s;
}
.animate #logo-p02_2{
  animation-delay:0.95s, 0s;
}

@keyframes move-ltc {
  0% {
    transform: translate(-500px);
  }
  100% {
    transform: translate(0);
  }
}
@keyframes center-to-corner {
  0% {
    transform: translate(0, 0) scale(1);  
  }
  10%{
    transform: translate(0, 0) scale(0.3); 
  }
  100% {
    transform: translate(43vw, 40vh) scale(0.2);
  }
}
@keyframes...

JavaScript

// Custom page actions
;(function($){
  'use strict';

  window.sandboxTheme = function(){
    var $body = $('body'),
        eventNames = ['resize', 'scroll', 'ready', 'load', 'sticky'],
        readyStates = ['interactive', 'complete'],
        trigger_event = function(){
          var feature,
              featureName,
              eventName = typeof arguments[0] !== 'undefined' ? arguments[0] : null;

          if ( eventName && $.inArray(eventName, eventNames) !== -1 ) {
            // Trigger all features
            for ( featureName in sandboxTheme.features ) {
              if ( sandboxTheme.features.hasOwnProperty(featureName) ) {
                if ( sandboxTheme.info['feature-' + featureName] ) {
                  feature = sandboxTheme.features[featureName];
                  if ( feature.hasOwnProperty(eventName) ) {
                    feature[eventName]();
                  }
                }
              }
            }
          }
        },
        ready_events_register = function(){
          trigger_event('ready');
          $(window).on('scroll', function(){
            trigger_event('scroll');
          });
          $(window).on('debouncedresize', function(){
            trigger_event('resize');
          });
        },
        setup = function setup(){
          var featureName,
              feature,
              featureOptions,
              dataName,
              dataValue,
              data = arguments[0];

          sandboxTheme.info = {};
          sandboxTheme.page = {};

          if ( $.isPlainObject(data) ) {
            for ( dataName in data ) {
              if ( data.hasOwnProperty(dataName) ) {
                dataValue = dataName === 'id' ? parseInt(data[dataName]) : data[dataName];

                if ( dataName !== 'info') {
                  sandboxTheme.page[dataName] = dataValue;
                }
              }
            }
            if ( data.hasOwnProperty('info') ) {
              for ( dataName in...