JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<body>
  <!--NOT relevant-->
  <div class="nav-side-bar">
    <a href="javascript:void(0)" class="close-button">&times;</a>
    <a href="javascript:void(0)">content <span class="fa fa-home"></span></a>
    <a href="javascript:void(0)">content</a>
    <a href="javascript:void(0)"></a>
    <a href="javascript:void(0)">content</a>
  </div>
  <!--NOT relevant-->

  <div id="cart-circle">
    <div id="cart-content">
      <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
      <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
    </div>
  </div>

  <div class="cart-side-bar-wrapper">
    <div class="cart-side-bar-container"></div>
  </div>
</body>

CSS

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;
}

@media (min-width: 600px) {
  body #cart-circle {
    height: 265px;
    width: 285px;
  }
}

#cart-content {
  position: fixed;
  top: 0;
  right: 0;
  transition: all 0.5s;
}

#cart-icon {
  transition: all 0.5s;
  color: #e74c3c;
  margin-right: 10.2%;
}

@media (min-width: 600px) {
  #cart-icon {
    font-size: 210px;
  }
}

#cart-title {
  position: fixed;
  right: 0;
  color: #e74c3c;
  margin-right: 13.2%;
  margin-top: .6%;
  font-size: 346%;
  display: inline-block;
}

#cart-title::before {
  content: 'MY CART';
}

.cart-side-bar-wrapper {
  position: fixed;
  display: block;
  right: 0;
  z-index: 99;
  height: 100vh;
  width: 500px;
  background-color: #e74c3c;
  box-shadow: -11px 8px 15px rgba(0, 0, 0, 0.467);
  transition: transform 0.5s;
  transform: translate3d(103%, 0, 0);
  transform-style: preserve-3d;
}

.cart-side-bar-wrapper::before {
  content: '';
  visibility: hidden;
  opacity: 0;
  width: 400vw;
  /*dim background*/
  height: 100vh;
  z-index: -1;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: 100%;
  transition: opacity 0.5s;
}






.open-cart-side-bar {
  animation-delay: 0s;
  animation-duration: 0.95s;
  animation-name: trigger-open-cart-side-bar;
  animation-fill-mode: both;
}

.open-cart-side-bar::before{
  content: '';
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes trigger-open-cart-side-bar {
  50% {
    transform: translate3d(0, 0, 0);
  }
  80% {
    transform: translate3d(3%, 0, 0);
  }
  95% {
    transform: translate3d(0.5%, 0, 0);
  }
  100% {
    transform: translate3d(1%, 0, 0);
  }
}

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name:...

JavaScript

$(document).ready(function() {
  var navSideBar = document.querySelector(".nav-side-bar"); //not relevant
  $.fn.extend({
    animateCss: function(animationName) {
      this.addClass('animated ' + animationName).one('animationEnd', function() {
        $(this).removeClass('animated ' + animationName);
      });
    }
  });
  var c = $(".cart-side-bar-wrapper"),
    cc = $("#cart-circle"),
    ci = $("#cart-icon"),
    ct = $("#cart-title"),
    handleBgCartSideBar = function(e) {
      if (e.offsetX < navSideBar.offsetWidth) {
        closeCart();
      }
    },
    openCart = function() {
      c.addClass('open-cart-side-bar').attr("style", "display:block!important");
      c.removeClass('close-cart-side-bar');

      cc.addClass('open-cart-circle');
      cc.removeClass('close-cart-circle');
      
      ci.addClass("open-cart-icon");
      ci.removeClass("close-cart-icon");
      
      ct.removeClass("bounceOutRight");
      ct.addClass("bounceInRight");
      $("#menu-icon").animateCss("bounce");
    },
    closeCart = function() {
      c.removeClass('open-cart-side-bar');
      c.addClass('close-cart-side-bar');
      
      cc.removeClass('open-cart-circle');
      cc.addClass('close-cart-circle');
      
      ci.removeClass("open-cart-icon");
      ci.addClass("close-cart-icon");
      
      ct.removeClass("bounceInRight");
      ct.addClass("bounceOutRight");
      setTimeout(function() {
        c.attr("style", "");
      }, 550);
    };
  $("#cart-circle").on('click', function() {
    openCart();
  });
  c.on("click", handleBgCartSideBar);
});