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 back">
            <div class="botScoreWrapper" id="botScoreWrapperBackUCB">
              <div class="botScoreWrapperInside" id="botScoreWrapperInsideBackUCB">
                <div class="botLogos">
                  <div class="botScoreVS">
                    <span class="botCupLogoName">
                      <img id="botCupLogo11" class="botCupLogo" src="">
                      <span id="botCupName11" class="botCupName"></span>
                    </span>
                    <span class="botVS">
                      <span id="botVSTag" class="botVSTag">VS</span>
                    </span>
                    <span class="botCupLogoName">
                      <img id="botCupLogo12" class="botCupLogo" src="">
                      <span id="botCupName12" class="botCupName"></span>
                    </span>
                  </div>
                  <span id="summaryText1" class="botcurrentscore"></span>
                  <span id="" class="botcurrentteam"></span>
                </div>
              </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</span>
                  </span>
                  <span class="botCupLogoName">
                    <img id="botCupLogo22" class="botCupLogo"...

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 .close {
  position: absolute;
  margin-top: -30px;
  display: none;
  width: 20px;
  cursor: pointer;
}

mybot .mybotimgprofile{
  cursor: pointer;
}

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

mybot .col-hgt-text {
  height: 50px;
  display: flex;
  align-items: center;
  float: right;
  margin-right: 10px;
  padding-top: 70px;
}

mybot .col-hgt-ad {
  margin-top:20px;
  display: flex;
  align-items: center;
}

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: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
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 .back {

  animation: back 15s infinite linear;
  -webkit-animation: back 15s infinite linear;
  -moz-animation: back 15s infinite linear;
  -o-animation:...