JSFiddle - React, Tailwind, and code Playground

HTML

<div class="swipe-area" id="swipe-area">
  <div id="cbox-canvas">
    <div class="anim-container">
      <div class="cbox-arrow" id="cbox-arrow"></div>
      <div class="cbox-text-1" id="cbox-text-1"></div>
      <div class="cbox-box-1" id="cbox-box-1"></div>
      <div class="cbox-box-2" id="cbox-box-2"></div>
      <div class="cbox-text-2" id="cbox-text-2"></div>
    </div>
  </div>
</div>

CSS

/*SWIPE*/

.swipe-area {
  position: absolute;
  width: 369px;
  height: 371px;
  left: 895px;
  top: 130px;
  z-index: 15;
  background: url('https://image.ibb.co/j4j7uk/sc_bg.png') no-repeat;
  background-size: 100%;
}

.anim-container {
  position: absolute;
  width: 360px;
  height: 366px;
  right: 5px;
  top: 5px;
  z-index: -1;
  background-size: 100%;
  overflow: hidden;
}

.cbox-arrow {
  position: absolute;
  left: 56px;
  top: 0;
  z-index: -1;
  width: 260px;
  height: 264px;
  background: url('https://image.ibb.co/fXKwn5/arrow.png') no-repeat;
  background-size: 100%;
  -webkit-animation: 10s slide;
}

.cbox-text-1 {
  position: absolute;
  left: 72px;
  top: 100px;
  z-index: -1;
  width: 230px;
  height: 65px;
  background: url('https://image.ibb.co/d6YYZk/test1.png') no-repeat;
  background-size: 100%;
  opacity: 1;
}

.cbox-text-2 {
  position: absolute;
  left: 72px;
  top: 100px;
  z-index: -1;
  width: 230px;
  height: 65px;
  background: url('https://image.ibb.co/bCaQfQ/test2.png') no-repeat;
  background-size: 100%;
  opacity: 0;
}

.cbox-box-1 {
  position: absolute;
  left: 55px;
  top: 167px;
  z-index: -1;
  width: 257px;
  height: 65px;
  background: url('https://image.ibb.co/fG7hS5/box1.png') no-repeat;
  background-size: 100%;
  opacity: 0;
}

.cbox-box-2 {
  position: absolute;
  left: 135px;
  top: 124px;
  z-index: -1;
  width: 99px;
  height: 127px;
  background: url('https://image.ibb.co/dOSSuk/box2.png') no-repeat;
  background-size: 100%;
  opacity: 0;
}

.hidden {
  display: none !important;
}

.fade-in {
  -webkit-animation: 1.5s 2.5s fade;
  -o-animation: 1.5s 2.5s fade;
  -moz-animation: 1.5s 2.5s fade;
  -ms-animation: 1.5s 2.5s fade;
  animation: 1.5s 2.5s fade;
}

.fade-in-one {
  -webkit-animation: 2.5s 5s fade;
  -o-animation: 2.5s 5s fade;
  -moz-animation: 2.5s 5s fade;
  -ms-animation: 2.5s 5s fade;
  animation: 2.5s 5s fade;
}

.fade-in-two {
  -webkit-animation: 2.5s 7.5s fade-alt forwards;
  -o-animation: 2.5s...

JavaScript

(function() {
  "use strict";
  var container = document.getElementById('cbox-canvas'),
    arrow = document.getElementById('cbox-arrow'),
    textOne = document.getElementById('cbox-text-1'),
    textTwo = document.getElementById('cbox-text-2'),
    boxOne = document.getElementById('cbox-box-1'),
    boxTwo = document.getElementById('cbox-box-2'),
    cnv = container.getElementsByTagName('canvas'),
    imageCover;

  function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height),
      ctx = canvas.context;

    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      //this.fillStyle = fillColor;
      this.shadowBlur = 15;
      this.shadowOffsetX = 0;
      this.shadowOffsetY = 0;
      this.shadowColor = fillColor;
      this.beginPath();
      this.moveTo(x, y);

      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
      this.stroke();
    };
    ctx.clearTo = function(fillColor) {

      var imageObj = new Image();

      imageObj.onload = function() {
        ctx.drawImage(imageObj, 0, 0);
      };
      imageObj.src = fillColor;
    };
    ctx.clearTo(fillColor || "#ddd");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
      var canvasRect = container.getBoundingClientRect(),
        x = e.pageX - canvasRect.left,
        y = e.pageY - canvasRect.top,
        radius = 30,
        calc = 0;

      fillColor = '#ff0000';

      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);

      calc += x;
      if (calc > 330 || calc < 6) {
        container.removeChild(cnv[0]);
       ...