JSFiddle - React, Tailwind, and code Playground

HTML

<mybot>
  <div class="profile_div" id="dragItem">
    <div class="row" id="upcomingCompletedBlock">
      <div class="col-hgt" style="cursor:move;">
        <div class="cube mybotimgprofile" id="mybotimgprofile">
        
             <div class="side bottom">
            <div class="botScoreWrapper" id="botScoreWrapperBottomUCB">
              <div class="botScoreWrapperInside" id="botScoreWrapperInsideBottomUCB">
                <div class="botScoreVS">
                  <span class="botCupLogoName">
                    <img id="botCupLogo31" class="botCupLogo" src="">
                    <span id="botCupName31" class="botCupName"></span>
                  </span>
                  <span class="botVS">
                    <span id="botVSTag" class="botVSTag">VS bot</span>
                  </span>
                  <span class="botCupLogoName">
                    <img id="botCupLogo32" class="botCupLogo" src="">
                    <span id="botCupName32" class="botCupName"></span>
                  </span>
                </div>
                <span id="summaryText3" class="botcurrentscore"></span>
                <span id="" class="botcurrentteam"></span>
              </div>
            </div>
          </div>
               <div class="side top">
            <div class="botScoreWrapper" id="botScoreWrapperTopUCB">
              <div class="botScoreWrapperInside" id="botScoreWrapperInsideTopUCB">
                <div class="botScoreVS">
                  <span class="botCupLogoName">
                    <img id="botCupLogo21" class="botCupLogo" src="">
                    <span id="botCupName21" class="botCupName"></span>
                  </span>
                  <span class="botVS">
                    <span id="botVSTag" class="botVSTag">VS  top</span>
                  </span>
                  <span class="botCupLogoName">
                    <img id="botCupLogo22" class="botCupLogo" src="">
                    <span id="botCupName22"...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Satisfy);
/* General */
mybot {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  position: sticky;
  z-index: 2147483640;
  cursor: move;
}

mybot * {
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

mybot img {
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -khtml-user-drag: none;
}

mybot .row{
  margin-right: 0px;
}

mybot a,
mybot a:hover,
mybot a:focus {
  text-decoration: none;
  outline: none;
}

/* General end*/

/* MyBot */
mybot .profile_div {
  position: fixed;
  bottom: 0;
  width: 320px;
  cursor: default;
  z-index: 2147483647;
}

mybot .mybotimgprofile{
  cursor: pointer;
}

mybot .col-hgt {
  display: flex;
  align-items: center;
  cursor: default !important;
}

mybot .cube {
  position: relative;
}

mybot .side {
  position: absolute;
  box-sizing: border-box !important;
  background-color: #fff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  backface-visibility: visible;

}
mybot .side::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.15); */
}
mybot .side span {
  position: relative;
}

mybot .top {
  transform:  rotateX(90deg);
  -webkit-transform:rotateX(90deg);
  -moz-transform:  rotateX(90deg);
  -o-transform:  rotateX(90deg);
  -ms-transform: rotateX(90deg);
  animation: top 15s infinite linear;
  -webkit-animation: top 15s infinite linear;
  -moz-animation: top 15s infinite linear;
  -o-animation: top 15s infinite linear;
}
mybot .bottom {
  transform:  rotateX(-90deg);
  -webkit-transform:  rotateX(-90deg);
  -moz-transform:  rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  -ms-transform:  rotateX(-90deg);
  animation: bottom 15s infinite linear;
  -webkit-animation: bottom 15s infinite linear;
 ...

JavaScript

setTimeout(function(){ 
document.querySelectorAll('.side').forEach(function(x) {
   x.style.backfaceVisibility  = 'hidden';
});
//setting value below 100 somtimes fails on my PC. 
// keep it above 200
}, 200);