JSFiddle - React, Tailwind, and code Playground

by Kiran G

HTML

<div id="Stage_box1" class="Stage_box1_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 100px; height: 100px; right: auto; bottom: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0px); opacity: 1; transition: opacity 0.15s ease-in 0.25s;">

  <div id="Stage_box1_stroke" class="Stage_box1_stroke_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 80px; height: 80px; right: auto; bottom: auto; border-radius: 50%; transform-origin: 50% 50% 0px; transform: translate(6px, 6px) translateZ(0px) rotate(0deg) scale(1, 1); opacity: 1; border: 4px solid rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform-style: preserve-3d;"></div>

  <div id="Stage_box1_stroke2" class="Stage_box1_stroke2_id" style="position: absolute; margin: 0px; left: 0px; top: 0px; width: 96px; height: 96px; right: auto; bottom: auto; border-radius: 50%; transform-origin: 50% 50% 0px; transform: translate(-6px, -6px) translateZ(0px) rotate(0deg) scale(1, 1); opacity: 0.4; border: 8px solid rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform-style: preserve-3d;"></div>



    <div id="eid_1516858027443" style="position: relative; height: 100px; width: 100px; transform:                  translateZ(0px);">
      <div id="eid_1516858027443_txt" class="eid_1516858027443_txt_id" style="position: absolute; margin:           0px; left: 0px; top: 22px; width: 100px; height: auto; right: auto; bottom: auto; <-webkit-tap->            </-webkit-tap->highlight-color: rgba(0, 0, 0, 0); font-family: icon-font, Arial, sans-serif;                   font-size: 60px; color: rgb(255, 255, 255); font-weight: 400; text-decoration: none; font-style:                normal; text-align: center; line-height: 60px;">
        <div data-icon="1" class="icon">d </div>
      </div>
    </div>
    
    
  </div>

CSS

body {
  background-color: #008080;
}

JavaScript

var comp;
AdobeEdge.bootstrapCallback(function(compId) {
  comp = AdobeEdge.getComposition(compId).getStage();


  // comp.$("Stage").css({"opacity":0.5});
  // comp.getSymbol("globe").getSymbol("continents-animation").$("flatmap-front").css("opacity","0");
  // comp.getSymbol("globe").$("continents-animation").css("opacity","0.2");
  // document.querySelector("#Stage_globe_continents-animation_flatmap-front").style.display = 'none';
  // comp.getSymbol("globe").getSymbol("continents-animation").stop();
  // document.querySelector("body").className += "loaded";

  /*
  function set() {
    document.querySelector('#Stage_globe_continents-animation_flatmap-back').style.opacity = '0';
  }

  if (/(?!.*?compatible|.*?webkit)^mozilla|opera/i.test(navigator.userAgent)){
    document.addEventListener("DOMContentLoaded", set, false);
  }else{
    window.setTimeout(set,0);
  }
  */
  //comp.$("Group").css({"left":"0%"});
  //comp.getSymbol("Stage").$("Group").css({"margin-left":"auto"});
  //comp.css({"opacity":"0"});

});

/*
var stage = document.querySelector("#Stage");
var stage_color = document.querySelector('#color');
var icon_color = document.querySelector('#icon-color');
var ellipse_color = document.querySelector('#ellipse-color');
*/

function vc_toggle(t) {
  if (t.innerHTML == 'Stop') {
    comp.getSymbol("globe").getSymbol("continents-animation").stop();
    t.innerHTML = 'Play';
  } else {
    comp.getSymbol("globe").getSymbol("continents-animation").play();
    t.innerHTML = 'Stop';
  }
}

// -----------------------------------------------------------------------------------------------------

function toggle(what, number) {
  var elements = document.querySelectorAll('.' + what);
  for (i = 0; i < elements.length; ++i) {
    if (elements.classList) {
      elements[i].classList.remove("on");
    } else {
      elements[i].className = ' ' + what;
    }
  }
  var el = document.querySelector('#' + what + number);
  if (el.classList) {
   ...